Example complicated flex 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 Outline form field Outline form field
Outline form field Outline form field 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>