kiskiskit
@kiskiskit
Жадно изучаю каждый пиксель

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

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

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

Мои неудачные наработки с использованием flex-direction:
https://codepen.io/kiskiskit/pen/wvezRvr
  • Вопрос задан
  • 121 просмотр
Решения вопроса 2
@Everybody_Lies
можно так
или как то так, если ширина блоков имеет не фиксированную величину
Ответ написан
@callmegrisha
Возможно. 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, качнешься очень даже хорошо
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы