Три колонки в одной строке с помощью Flexbox CSS

Простой, но популярный вопрос о том, как отобразить три колонки в одной строке с помощью Flexbox в CSS.

Зададим 6 div-ов (блоков) в HTML:

<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

И добавим CSS с использованием Flex, чтобы у нас получилось 2 строки по 3 столбца (колонки):

body>div {
  background: #aaa;
  display: flex;
  flex-wrap: wrap;
}

body>div>div {
  flex-grow: 1;
  width: 33%;
  height: 100px;
}

body>div>div:nth-child(even) {
  background: #23a;
}

body>div>div:nth-child(odd) {
  background: #49b;
}

Вот что у нас получилось:

Не забываем, что нам надо после этого учесть изменение в CSS для малых размеров экрана. В примере выше это не показано.

Сергей Ермилов