Below you can see a form consisting of two columns of three fields. These columns are controlled by a directive that determines the position of the fields.

Outline form field

    <!-- app.component.html -->
    <div flex-container>
        <div flex-column>
            <mat-form-field appearance="outline" flex-item>
                <mat-label>Outline form field</mat-label>
                <input matInput />
            </mat-form-field>

            <mat-form-field appearance="outline" flex-item>
                <mat-label>Outline form field</mat-label>
                <input matInput />
            </mat-form-field>

            <mat-form-field appearance="outline" flex-item>
                <mat-label>Outline form field</mat-label>
                <input matInput />
            </mat-form-field>
        </div>

        <div flex-column>
            <mat-form-field appearance="outline" flex-item>
                <mat-label>Outline form field</mat-label>
                <input matInput />
            </mat-form-field>

            <mat-form-field appearance="outline" flex-item>
                <mat-label>Outline form field</mat-label>
                <input matInput />
            </mat-form-field>

            <mat-form-field appearance="outline" flex-item>
                <mat-label>Outline form field</mat-label>
                <input matInput />
            </mat-form-field>
        </div>
    </div>