Create a two-column grid using flexbox

Question

I am trying to use flexbox to align articles in 2 columns, but somehow I can't get it to work. How to create a grid with two columns using flexbox?

The following example illustrates what I tried before:

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

Run code

Answer 1

You were almost there. You just need to add flex-wrap: wrapto the container.

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

When creating flexbox, several default rules appear.

One rule says that all flex items will be aligned in a line (default:) 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/