使用CSS显示的响应式网格:flex
问题描述:
我想将5个列(A,B,C,D,E)中的我的flexbox显示为2列,一旦屏幕变为900px或更小。使用CSS显示的响应式网格:flex
我的HTML:
<div class="container">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
<div class="box">D</div>
<div class="box">E</div>
</div>
我的CSS设置:
.container{
background:#231F20;
display:flex;
flex-wrap:wrap;
}
.box{
flex:1;
text-align:center;
border:5px solid #ADA8AA;
color:white;
padding:2rem;
font-size:2rem;
background:#423e3f;
box-sizing: border-box;
}
我设法从5列到两列,一旦使用
@media screen and (max-width: 900px) {
.box{
flex: auto;
width: 50%;
}
}
我的问题变得越来越小是最后一个盒子(E)完全伸展,我想只展示在50%宽,我怎么能这样做?
工作示例here。
答
如果你改变你的CSS
@media screen and (max-width: 900px) {
.box {
width: 50%;
flex: auto;
}
.box:last-child {
max-width: 50%;
}
}
你会得到这样的:https://codepen.io/anon/pen/mBdGNg(它的一个分支您样品)
答
你可以申请一个max-width
最后.box的要素如下:
@media screen and (max-width: 900px) {
.box{
width: 50%;
flex: auto;
}
.box:last-child {
max-width:50%;
}
}
答
HTML code
<div class="container">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
<div class="box">D</div>
<div class="box">E</div>
</div>
CSS代码
.container{
background:#231F20;
display:flex;
flex-wrap:wrap;
}
.box{
flex:1;
text-align:center;
border:5px solid #ADA8AA;
color:white;
padding:2rem;
font-size:2rem;
background:#423e3f;
box-sizing: border-box;
}
只要改变在@media屏幕
@media screen and (max-width: 900px) {
.box {
width: 50%;
flex: auto;
}
.box:last-child {
max-width: 50%;
}
}
随意问什么
谢谢你,为什么我没有”的一些值首先考虑它 –