【发布时间】：2020-01-18 17:13:20
【问题描述】：
在尝试了各种flexbox 方法后，我需要寻求指导。我必须为桌面和移动设备制作复杂的布局。然而，即使是移动布局也需要改变，我想从那开始。
这是我需要完成的第一个布局，如果这是完成此任务的最佳方法，我想使用 angular / material / flexbox 来完成。 （引导程序不适合我。）
到目前为止，我已经整理了一些东西，但这是一个挑战，因为我不完全理解 flexbox 功能材料已经提供了什么。对我来说，更大的挑战是让右侧的盒子向右包裹。现在，它位于其他项目的下方。我尝试了一些浮动技巧，但没有奏效。
这是我目前拥有的 HTML 代码（angular 位于后端并相应地注入其样式）：
<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 指南和文档，但它让我无法找到正确的方法。
顺便说一下，这是我需要完成的第二个布局：
有什么建议或链接到类似的有效例子吗？
【问题讨论】：
-
您能分享一下不同分辨率的预期结果吗？
-
添加了第二个布局@alessandro。
标签： html css angular flexbox angular-material