Question

我尝试使用flexbox来对齐2列中的文章，但不知怎的，我无法让它工作。如何使用flexbox创建2列网格？

以下示例说明了我之前尝试的内容：

＆＃13;

.container {
    display:flex;
}

.post {
    flex:1 0 50%
}

＆＃13;

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

＆＃13;

Answer 1

你快到了。您只需要将flex-wrap: wrap添加到容器中。

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

创建弹性箱时，会有多个默认规则发挥作用。

一条规则说所有弹性项目都会排成一行（默认值为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/

使用flexbox创建双列网格

1 个答案: