html - Angular Material Flexbox

Question

在尝试了各种flexbox方法之后，我需要寻求指导。我必须为桌面和移动设备制作一个复杂的布局。然而，即使是移动布局也需要改变，我想从那开始。

这是我需要完成的第一个布局，我想用 angular/material/flexbox 来完成，如果那样的话是完成此任务的最佳方法。 (Bootstrap 不是我的选择。)

到目前为止，我已经把一些东西放在一起了，但这是一个挑战，因为我不完全理解已经提供的 flexbox 特性 Material 。对我来说，更大的挑战是让右侧的盒子向右包裹。现在，它位于其他元素的下方。我尝试了一些 float 技巧，但没有成功。

这是我目前拥有的 HTML 代码(angular 在后端并相应地注入(inject)其样式):

<div class="ps contain">
    <h1 class="mat-h1">Find a Provider</h1>
    <form>
        <mat-expansion-panel class="mat-expansion-panel">
            <mat-expansion-panel-header class="mat-expansion-panel-header">
                <mat-panel-title class="mat-panel-title">Show Advanced Search Options</mat-panel-title>
                <mat-panel-description class="mat-panel-description">This is a summary of the content</mat-panel-description>
            </mat-expansion-panel-header>

            <!-- Items -->
            <div class="psOptionsContainer">
                <div class="psOptions psInfoOptions">
                    <div><mat-checkbox id="anpPsChkbx" class="psChkbx">New Patients</mat-checkbox></div>
                    <div><mat-checkbox id="mhrPsChkbx" class="psChkbx">My Records</mat-checkbox></div>
                    <div><mat-checkbox id="ihcmgPsChkbx" class="psChkbx">Mountain Medical</mat-checkbox></div>
                    <div><mat-checkbox id="slPsChkbx" class="psChkbx">St. John</mat-checkbox></div>
            </div>

            <div class="psOptions psOptionsProviderType">
                <mat-form-field class="mat-form-field ps-mat-form-field">
                    <mat-select name="psProviderType" placeholder="Provider Type">                            
                        <mat-option value="doctor">Doctor</mat-option>
                        <mat-option value="nurse">Nurse</mat-option>
                        <mat-option value="nurse">Dentist</mat-option>
                        <mat-option value="nurse">Chiropractor</mat-option>
                        <mat-option value="nurse">Orthodontist</mat-option>
                    </mat-select>
                </mat-form-field>
            </div>
            <!-- Languages Spoken -->
            <div class="psOptions psOptionsLanguagesSpoken">
                <mat-form-field class="mat-form-field">
                    <mat-select name="psLanguagesSpoken" placeholder="Languages Spoken">
                        <mat-option value="doctor">American</mat-option>
                        <mat-option value="nurse">Belgian</mat-option>
                        <mat-option value="nurse">Chinese</mat-option>
                        <mat-option value="nurse">Danish</mat-option>
                        <mat-option value="nurse">English</mat-option>
                    </mat-select>
                </mat-form-field>
            </div>

            <!-- Gender Preferences -->
            <div class="psOptions psOptionsGenderPreferences">
                <mat-form-field class="mat-form-field">
                   <mat-select name="psGenderOptions" placeholder="Gender Preferences">
                        <!-- <mat-option *ngFor="let ptype of ptypes" [value]="sample.value"> -->
                        <!-- <mat-option>{{ ptype.viewValue }}</mat-option> -->
                        <mat-option value="doctor">Female</mat-option>
                        <mat-option value="nurse">Male</mat-option>
                        <mat-option value="nurse">Other</mat-option>
                    </mat-select>
                </mat-form-field>
            </div>

            <!-- Clinic -->
            <div class="psOptions psOptionsClinic">
                <mat-form-field class="mat-form-field">
                    <mat-select name="psClinic" placeholder="Clinic">
                        <mat-option value="doctor">American Fork</mat-option>
                        <mat-option value="nurse">Murray</mat-option>
                        <mat-option value="nurse">St. George</mat-option>
                    </mat-select>
                </mat-form-field>
            </div>

            <!-- Hospital Affiliation -->
            <div class="psOptions psOptionsHospitalAffiliation">
                <mat-form-field class="mat-form-field">
                    <mat-select name="psHospitalAffiliation" placeholder="Hospital Affiliation">
                        <mat-option value="doctor">American Fork</mat-option>
                        <mat-option value="nurse">Murray</mat-option>
                        <mat-option value="nurse">St. George</mat-option>
                    </mat-select>
                </mat-form-field>
            </div>

        </div>

        <div class="psInfoOptions">
            <div><mat-checkbox id="anpPsChkbx" class="psChkbx">Accepting New Patients</mat-checkbox></div>
            <div><mat-checkbox id="mhrPsChkbx" class="psChkbx">My Health Records</mat-checkbox></div>
            <div><mat-checkbox id="ihcmgPsChkbx" class="psChkbx">Intermountain Medical Group</mat-checkbox></div>
            <div><mat-checkbox id="slPsChkbx" class="psChkbx">St. Luke's</mat-checkbox></div>
        </div>

    </mat-expansion-panel>
   </form>
</div>

这是我的 SCSS:

@import '../../../styles.scss';
/* This brings in some general variables and a function ( remy() ) that converts pixels to rem
.ps {
    .psMobile {
        display: none;
    }
    .mat-h1 {
        font-size: remy(32);
        text-align: center;
    }
    .mat-expansion-panel {
        position: inherit;
    }
    .mat-expansion-panel-header {
        position: inherit;
    }
    .mat-panel-title {
        position: inherit;
    }
    .mat-panel-description {
        display: none;
    }
    .psOptionsContainer {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;

        -ms-flex-wrap: wrap;
        flex-wrap: wrap;

        -webkit-box-pack: flex-start safe;
        -ms-flex-pack: flex-start safe;
        justify-content: flex-start safe;

        .psOptions {
            height: 3rem;
            padding: 0.5rem;
            width: 16.875rem;

            -webkit-box-ordinal-group: 1;
            -ms-flex-order: 0;
            order: 0;

            -webkit-box-flex: 1;
            -ms-flex-positive: 1;
            flex-grow: 1;

            -ms-flex-negative: 1;
            flex-shrink: 1;

            -ms-flex-preferred-size: 25%;
            flex-basis: 25%;

            -webkit-box-flex: 0;
            -ms-flex: 0 1 auto;
            flex: 0 1 auto;

            -ms-flex-item-align: auto;
            align-self: auto;
        }
    }
    .psInfoOptions {
        background-color: orange;
        /* hacks I have tried to get this container to move to the right of everything else: */
            // padding: 1rem;
            // float: right;
            // width: remy(260);
            // top: 0;
    }

    /* $xs is  640px  
       The box on the right is supposed to flow underneath all the other items at this point
    */

    @media screen and (max-width: $xs) {
        .psOptionsContainer {
            display: block;
            width: 100%;
            min-width: 16.875rem;
            /* center the elements: space-around works in IE: worry about this later */
            // -ms-flex-pack: distribute;
            // justify-content: space-around;
         }
         .psOptions {
            display: block;
            width: 90%;
            margin-top: 0.3125rem;
            .mat-form-field {
                /* calculate this later based on breakpoint */
                width: 30rem;
            }
         }
         .psInfoOptions {
            display: inline-block;
        }
    }

另外，我似乎在调整表单元素的大小时遇到​​问题，因为 angular material 向每个表单元素添加了多个 HTML 元素。我研究了可用的 Angular Material 指南和文档，但我不知道如何找出正确的方法来做到这一点。

顺便说一句，这是我需要完成的第二个布局:

任何有效的类似示例的建议或链接？

Answer 1

Angular Material 不具有响应行为。

您需要使用 Angular Flex-Layout https://github.com/angular/flex-layout与 Angular Material 一起

看这里https://tburleson-layouts-demos.firebaseapp.com/#/responsive了解响应式行为在 Angular Flex-Layout 中的工作原理

或

仅使用 flex-box 使用 css这是一个很好的指南https://css-tricks.com/snippets/css/a-guide-to-flexbox/