如何在 angular material 卡中创建列？

Question

我们如何将 angular 垫子卡片网格分成几部分？有人在这里有想法吗？我想创建一个与下图相同的分区，我在下面提供了我的示例代码以及垫卡和 inputs.Thank 你。

已经尝试了很多东西，但似乎无法弄清楚。

[这就是我想要的分区][1]

代码

<div><hr style="width:38%;margin-top:50px;background-color:#E5E5E5;"></div>
        <mat-card class="custom">
            <mat-card-content>
                <div fxLayout="row" fxFlex="100" fxLayoutAlign="space-around center">
                    <div fxFlex="45%">
                        <mat-form-field class="full-width" appearance="fill" style="margin-top: 20px;">
                            <mat-label>Firstname</mat-label>
                            <input matInput>
                        </mat-form-field>
                    </div>
                    <div fxFlex="45%">
                        <mat-form-field class="full-width" appearance="fill" style="margin-top: 20px;">
                            <mat-label>Lastname</mat-label>
                            <input matInput>
                        </mat-form-field>
                    </div>
                </div>
            </mat-card-content>
            <mat-card-content>
                <div fxLayout="row" fxFlex="100">
                    <div fxFlex="45%">
                        <mat-form-field class="full-width" appearance="fill" style="margin-top: 20px;">
                            <mat-label>Firstname</mat-label>
                            <input matInput>
                        </mat-form-field>
                    </div>
                </div>
            </mat-card-content>
        </mat-card>

Answer 1

这里是暂定的，不知道是不是你想要的：

<mat-card class="custom" style="width: 500px">
    <mat-card-content>
        <div fxLayout="row" fxLayoutAlign="space-between">
            <div fxLayout="column" fxFlex="0 0 47%">
                <mat-form-field class="full-width" appearance="fill" style="margin-top: 20px;">
                    <mat-label>Firstname</mat-label>
                    <input matInput>
                </mat-form-field>
            </div>
            <div fxLayout="column" fxFlex="0 0 47%">
                <mat-form-field class="full-width" appearance="fill" style="margin-top: 20px;">
                    <mat-label>Lastname</mat-label>
                    <input matInput>
                </mat-form-field>
            </div>
        </div>
        <div fxLayout="row" fxLayoutAlign="start">
            <div fxLayout="column" fxFlex="0 0 47%">
                <mat-form-field class="full-width" appearance="fill" style="margin-top: 20px;">
                    <mat-label>Phone Number</mat-label>
                    <input matInput>
                </mat-form-field>
            </div>
        </div>
        <div fxLayout="row" fxLayoutAlign="space-between">
            <div fxLayout="column" fxFlex="0 0 47%">
                <mat-form-field class="full-width" appearance="fill" style="margin-top: 20px;">
                    <mat-label>Company Name</mat-label>
                    <input matInput>
                </mat-form-field>
            </div>
            <div fxLayout="column" fxFlex="0 0 47%">
                <mat-form-field class="full-width" appearance="fill" style="margin-top: 20px;">
                    <mat-label>Title</mat-label>
                    <input matInput>
                </mat-form-field>
            </div>
        </div>
    </mat-card-content>
</mat-card>

https://stackblitz.com/edit/angular-nqxgkw

如何在 angular material 卡中创建列？

how to create columns in angular material card?

css

flexbox

angular-material

angular