用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/