用flexbox創建雙列網格

Question

我想用flexbox來對齊2列中的文章，但不知何故我無法讓它工作。如何用flexbox創建2列網格？

下面的例子說明之前，我試圖：你當時幾乎沒有

.container { 
 
    display:flex; 
 
} 
 

 
.post { 
 
    flex:1 0 50% 
 
}

<div class="container"> 
 

 
<article class="post"> 
 
    <header> <h1>Title</h1></header> 
 
    <p> Vestibulum tincidunt, eros vel iaculis dictum, turpis nulla rhoncus velit, sed blandit nulla lorem sed justo. Etiam enim augue, volutpat ac faucibus eu, fermentum viverra lorem. Integer tempor ac nisi sit amet pellentesque. Sed convallis tempor augue vitae placerat. Morbi ultricies bibendum dolor, nec interdum lorem efficitur quis. Maecenas pharetra enim ut venenatis dictum. Phasellus varius lobortis ante, id blandit lectus rhoncus id. Aliquam consectetur ex nec ex volutpat, finibus dignissim sem mattis. 
 

 
Nunc convallis at nunc a ultricies. Proin vulputate accumsan elit eu convallis. Curabitur porttitor dui sodales, aliquam ex ut, iaculis diam. Donec vulputate maximus eleifend. Vivamus eu purus nunc. Vivamus neque nisl, faucibus in risus vitae, consequat dignissim eros. Duis in massa at turpis tincidunt vestibulum. Nulla varius non leo vestibulum laoreet. Nulla facilisi. Maecenas vulputate massa ut metus iaculis lacinia vel in arcu. Etiam id vehicula massa. Nulla imperdiet sapien id condimentum euismod. </p> 
 
</article> 
 
    
 
    <article class="post"> 
 
    <header> <h1>Title</h1></header> 
 
    <p> Vestibulum tincidunt, eros vel iaculis dictum, turpis nulla rhoncus velit, sed blandit nulla lorem sed justo. Etiam enim augue, volutpat ac faucibus eu, fermentum viverra lorem. Integer tempor ac nisi sit amet pellentesque. Sed convallis tempor augue vitae placerat. Morbi ultricies bibendum dolor, nec interdum lorem efficitur quis. Maecenas pharetra enim ut venenatis dictum. Phasellus varius lobortis ante, id blandit lectus rhoncus id. Aliquam consectetur ex nec ex volutpat, finibus dignissim sem mattis. 
 

 
Nunc convallis at nunc a ultricies. Proin vulputate accumsan elit eu convallis. Curabitur porttitor dui sodales, aliquam ex ut, iaculis diam. Donec vulputate maximus eleifend. Vivamus eu purus nunc. Vivamus neque nisl, faucibus in risus vitae, consequat dignissim eros. Duis in massa at turpis tincidunt vestibulum. Nulla varius non leo vestibulum laoreet. Nulla facilisi. Maecenas vulputate massa ut metus iaculis lacinia vel in arcu. Etiam id vehicula massa. Nulla imperdiet sapien id condimentum euismod. </p> 
 
</article> 
 
    
 
    <article class="post"> 
 
    <header> <h1>Title</h1></header> 
 
    <p> Vestibulum tincidunt, eros vel iaculis dictum, turpis nulla rhoncus velit, sed blandit nulla lorem sed justo. Etiam enim augue, volutpat ac faucibus eu, fermentum viverra lorem. Integer tempor ac nisi sit amet pellentesque. Sed convallis tempor augue vitae placerat. Morbi ultricies bibendum dolor, nec interdum lorem efficitur quis. Maecenas pharetra enim ut venenatis dictum. Phasellus varius lobortis ante, id blandit lectus rhoncus id. Aliquam consectetur ex nec ex volutpat, finibus dignissim sem mattis. 
 

 
Nunc convallis at nunc a ultricies. Proin vulputate accumsan elit eu convallis. Curabitur porttitor dui sodales, aliquam ex ut, iaculis diam. Donec vulputate maximus eleifend. Vivamus eu purus nunc. Vivamus neque nisl, faucibus in risus vitae, consequat dignissim eros. Duis in massa at turpis tincidunt vestibulum. Nulla varius non leo vestibulum laoreet. Nulla facilisi. Maecenas vulputate massa ut metus iaculis lacinia vel in arcu. Etiam id vehicula massa. Nulla imperdiet sapien id condimentum euismod. </p> 
 
</article> 
 
    
 
    <article class="post"> 
 
    <header> <h1>Title</h1></header> 
 
    <p> Vestibulum tincidunt, eros vel iaculis dictum, turpis nulla rhoncus velit, sed blandit nulla lorem sed justo. Etiam enim augue, volutpat ac faucibus eu, fermentum viverra lorem. Integer tempor ac nisi sit amet pellentesque. Sed convallis tempor augue vitae placerat. Morbi ultricies bibendum dolor, nec interdum lorem efficitur quis. Maecenas pharetra enim ut venenatis dictum. Phasellus varius lobortis ante, id blandit lectus rhoncus id. Aliquam consectetur ex nec ex volutpat, finibus dignissim sem mattis. 
 

 
Nunc convallis at nunc a ultricies. Proin vulputate accumsan elit eu convallis. Curabitur porttitor dui sodales, aliquam ex ut, iaculis diam. Donec vulputate maximus eleifend. Vivamus eu purus nunc. Vivamus neque nisl, faucibus in risus vitae, consequat dignissim eros. Duis in massa at turpis tincidunt vestibulum. Nulla varius non leo vestibulum laoreet. Nulla facilisi. Maecenas vulputate massa ut metus iaculis lacinia vel in arcu. Etiam id vehicula massa. Nulla imperdiet sapien id condimentum euismod. </p> 
 
</article> 
 

 

 
</div>

Answer 1

。您只需將flex-wrap: wrap添加到容器。

DEMO：http://jsfiddle.net/mox4m08c/

當你創建一個Flexbox的幾個默認的規則發揮作用。

一個規則表示所有的彈性項目將連續對齊（默認：flex-direction: row）。

另一個規則是Flex項目無法換行（默認：flex-wrap: nowrap）。

您需要指定flex-wrap: wrap以覆蓋默認值。

flex-wrap

的CSS flex-wrap屬性指定柔性物品是否被強制 成一行或可以纏繞在多條線。

初始值：nowrap

如果您希望從row切換對齊column對於較小的屏幕，使用媒體查詢進行調整，以flex-direction。

@media screen and (max-width: 500px) { 
    .container { flex-direction: column; } 
} 

DEMO：http://jsfiddle.net/mox4m08c/1/