使用CSS显示的响应式网格：flex

Question

我想将5个列（A，B，C，D，E）中的我的flexbox显示为2列，一旦屏幕变为900px或更小。

我的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。

Answer 1

如果你改变你的CSS

@media screen and (max-width: 900px) { 
    .box { 
     width: 50%; 
     flex: auto; 
    } 
    .box:last-child { 
     max-width: 50%; 
    } 
} 

你会得到这样的：https://codepen.io/anon/pen/mBdGNg（它的一个分支您样品）

Answer 2

你可以申请一个max-width最后.box的要素如下：

@media screen and (max-width: 900px) { 
    .box{ 
    width: 50%; 
    flex: auto; 
    } 
    .box:last-child { 
    max-width:50%; 
    } 
} 

Answer 3

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

}

随意问什么