Question

尝试各种flexbox方法之后，我需要寻求指导。我必须为台式机和移动设备制作复杂的布局。但是，甚至移动布局也需要更改，我想从此开始。

这是我需要完成的第一个布局，我想使用angular / material / flexbox进行布局，如果这是完成此任务的最佳方法。（Bootstrap对我来说不是一个选择。）

到目前为止，我已经完成了一些工作，但这是一个挑战，因为我不完全了解材料已经提供的flexbox功能。对我来说，更大的挑战者是使右侧的包装盒向右包装。现在，它在其他项目的下面。我尝试了一些浮动的技巧，但没有成功。

这是我当前拥有的HTML代码（角度位于后端，并相应地注入其样式）：

<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 Flex-Layout https://github.com/angular/flex-layout与Angular Material一起使用

在这里https://tburleson-layouts-demos.firebaseapp.com/#/responsive看一下角度行为在Angular Flex-Layout中的工作原理

OR

仅在Flex-Box中使用CSS 这是一个很好的指南https://css-tricks.com/snippets/css/a-guide-to-flexbox/

角材料弹性盒

1 个答案: