Как расположить блоки с помощью flex?

Question

[Артур Левенсон]

Подскажите, пожалуйста, как можно организовать блоки таким образом:


Возможно ли это сделать флексами?

Мои неудачные наработки с использованием flex-direction:
https://codepen.io/kiskiskit/pen/wvezRvr

Answer 1

[Everybody_Lies]

можно так
или как то так, если ширина блоков имеет не фиксированную величину

Comments

[Артур Левенсон]

спасибо большое!

Answer 2

[Hryhorii]

Возможно. flex-direction: column; здесь не нужен

Чтобы блоки переместились на новую строку, а не вжимались в одной, нужно указать свойство flex-wrap: wrap;, в данном случае для дива с классом column и так же для него указать justify-content: space-between;, если ты хочешь, чтобы они были прижаты по сторонам

Для кнопки указываешь следующие свойства:

.column button {
  width: 100%; /* растягивает на всю ширину блока .column */
  align-self: flex-end; /* прижимает к низу, дабы кнопка не растягивалась в высоту */
}

В твоем примере column-item всего 100px, они маленькие и разместятся в column в одну строку, но если прибавишь им ширины, например, в 200px или уменьшишь ширину column, то увидишь, как column-item будут перемещаться на новые строчки

Вообще, рекомендую поиграть в flexbox froggy, качнешься очень даже хорошо

Comments

[Артур Левенсон]

спасибо большое