Html 角材料柔性箱

在尝试了各种

flexbox

方法之后，我需要寻求指导。我必须为桌面和移动设备制作复杂的布局。然而，即使是移动设备的布局也需要改变，我想从这开始

这是我需要完成的第一个布局，如果这是完成此任务的最佳方法，我希望使用

角度
/
材料
/
flexbox
。（引导不是我的选择。）


到目前为止，我已经准备好了一些东西，但这是一个挑战，因为我不完全理解
flexbox
材料已经提供了哪些功能。对我来说，更大的挑战是让右边的盒子包到右边。现在，它在其他物品的下面。我尝试了一些浮动黑客，但没有成功

以下是我目前拥有的HTML代码（angular位于后端，并相应地注入其样式）：

此外，我似乎在调整表单元素的大小方面存在问题，因为
angular material
向每个表单元素添加了多个HTML元素。我已经研究了可用的角度材料指南和文档，但它让我无法找到正确的方法

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


任何类似示例的建议或链接都有效吗？
棱角材质不具有响应行为

您需要将角度柔性布局与角度材质一起使用

看看这里的Angular Flex布局中的响应行为是如何工作的

或

仅使用flex box使用css
这里有一个很好的指南
您能分享不同分辨率的预期结果吗？添加了第二个布局@alessandro。感谢您提供的信息@than。不幸的是，我目前工作的“开发人员”不想安装AngularFlex布局。不过，知道什么是可能的（什么不是）很好。谢谢。我一直在遵循Flexbox的指南。我继续讲下去。
<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>

@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;
        }
    }