我有一个要求,其中外部 flexbox 中的四个元素需要按如下方式排列:
当屏幕尺寸缩小到 400px 时,
@media screen and (max-width: 400px) {}
它需要更改,品牌名称需要放在最上面,其他元素在下面对齐,如下所示:
然而,这不是目前代码的工作方式。在桌面的情况下,品牌名称与 flexbox 的顶部对齐,并且选择框标签没有像我需要的那样垂直左对齐它们各自的选择框。
在移动 View 中,内容从外部 flexbox 中涌出(下图 2):
在下面找到相同的完整代码:
jQuery(document).ready(function($) {
jQuery('#SortBy').select2({
width: 'auto'
});
jQuery('#columnCheckboxes').select2({
width: 'auto'
});
jQuery('#rowCheckboxes').select2({
width: 'auto'
});
});
body {
font-family: montserratbold, montserratregular, sans-serif;
}
.HeadingBar {
display: flex;
flex-flow: row wrap;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
width: 100%;
background: #2a8aeb;
}
.Brand {
display: flex;
flex-direction: column;
flex: 1 1 30%;
width: 30%;
justify-content: center;
align-self: center;
height: 100%;
color: white;
font-size: 2rem;
padding-right: 2%;
padding-left: 1%;
margin: auto;
}
.Selectors {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
width: 70%;
}
.SelectorsSort {
display: flex;
flex: 1 1 15%;
padding: 1%
}
.SelectorsFilter {
display: flex;
flex: 1 1 80%;
padding: 1%
}
.SelectorFilterPhone {
display: flex;
flex: 1 1 50%;
padding: 1%
}
.SelectorFilterParameter {
display: flex;
flex: 1 1 50%;
padding: 1%
}
@media screen and (max-width: 400px) {
body {
font-size: 80%;
}
.Brand {
display: flex;
flex-direction: row;
flex: 1 1 100%;
align-self: left;
height: 40%;
color: white;
font-size: 1rem;
padding-right: 2%;
padding-left: 1%;
margin: auto;
}
.Selectors {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
height: 50%;
width: 100%;
}
.SelectorsSort {
display: flex;
flex: 1 1 15%;
padding: 1%
}
.SelectorsFilter {
display: flex;
flex: 1 1 80%;
padding: 1%
}
.SelectorFilterPhone {
display: flex;
flex: 1 1 50%;
padding: 1%
}
.SelectorFilterParameter {
display: flex;
flex: 1 1 50%;
padding: 1%
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
<div class="HeadingBar">
<div class="Brand">
Brand
</div>
<div class="Selectors">
<div class="SelectorsSort">
<div style="color:white; font-size: 120%">Sort:</div>
<select id="SortBy">
<option>--Sort By--</option>
<option>Parameter1</option>
<option>Parameter2</option>
<option>Parameter3</option>
<option>Parameter4</option>
</select>
</div>
<div class="SelectorsFilter">
<div class="SelectorFilterPhone">
<div style="color:white; font-size: 120%">Filter Phone:</div>
<select id="columnCheckboxes">
<option>--Filter Phone--</option>
<option>Samsung</option>
<option>Apple</option>
<option>Xiomi</option>
</select>
</div>
<div class="SelectorFilterParameter">
<div style="color:white; font-size: 120%">Filter Parameters:</div>
<select id="rowCheckboxes">
<option>--Filter Parameter--</option>
<option>Parameter1</option>
<option>Parameter2</option>
<option>Parameter3</option>
<option>Parameter4</option>
</select>
</div>
</div>
</div>
</div>
请帮助我解决 Flexbox 的 CCS 哪里出了问题,因为我是新手并且一直在努力解决它。 :(
最佳答案
编辑:希望这段代码有所帮助。
我建议您将媒体查询 max-width
更改为 450px
而不是 400。此外,您可能希望将下拉菜单包装在一个低于 450 像素的列。
如果您需要任何说明,请告诉我。
* {
box-sizing: border-box;
}
body {
font-family: montserratbold, montserratregular, sans-serif;
}
.HeadingBar {
display: flex;
flex-flow: row wrap;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
width: 100%;
background: #2a8aeb;
}
.Brand {
display: flex;
flex-direction: column;
flex: 1 1 30%;
width: 30%;
justify-content: center;
align-self: center;
height: 100%;
color: white;
font-size: 2rem;
padding-right: 2%;
padding-left: 1%;
margin: auto;
}
.Selectors {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
width: 70%;
}
.SelectorsSort {
flex: 1 1 auto;
padding: 1%
}
.SelectorsFilter {
display: flex;
flex: 1 1 80%;
padding: 1%;
justify-content: space-evenly
}
.SelectorFilterPhone {
flex: 1 1 auto;
padding: 1%
}
.SelectorFilterParameter {
flex: 1 1 auto;
padding: 1%
}
@media screen and (max-width: 400px) {
body {
font-size: 80%;
}
.Brand {
display: flex;
flex-direction: row;
flex: 1 1 100%;
align-self: left;
height: 40%;
color: white;
font-size: 1rem;
padding-right: 2%;
padding-left: 1%;
margin: auto;
}
.Selectors {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
height: 50%;
width: 100%;
}
.SelectorsSort {
flex: 1 1 15%;
padding: 1%
}
.SelectorFilterPhone {
flex: 1 1 auto;
padding: 1%
}
.SelectorFilterParameter {
flex: 1 1 auto;
padding: 1%
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
<div class="HeadingBar">
<div class="Brand">
Brand
</div>
<div class="Selectors">
<div class="SelectorsSort">
<div style="color:white; font-size: 120%">Sort:</div>
<select id="SortBy">
<option>--Sort By--</option>
<option>Parameter1</option>
<option>Parameter2</option>
<option>Parameter3</option>
<option>Parameter4</option>
</select>
</div>
<div class="SelectorFilterPhone">
<div style="color:white; font-size: 120%">Filter Phone:</div>
<select id="columnCheckboxes">
<option>--Filter Phone--</option>
<option>Samsung</option>
<option>Apple</option>
<option>Xiomi</option>
</select>
</div>
<div class="SelectorFilterParameter">
<div style="color:white; font-size: 120%">Filter Parameters:</div>
<select id="rowCheckboxes">
<option>--Filter Parameter--</option>
<option>Parameter1</option>
<option>Parameter2</option>
<option>Parameter3</option>
<option>Parameter4</option>
</select>
</div>
</div>
</div>
关于css - CCS Flexbox 挑战 - 内容未按要求在框中排列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57866503/