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

}

隨意問什麼