Как сделать такое выравнивание во flex?
Мне надо, чтобы блоки внутри flex-контейнера выстраивались, как показано на верхней картинке. И не надо как на двух нижних. Т.е., чтобы полные строки блоков выравнивались по центру, а неполные строки выравнивались по левому краю заполненных строк.
Можно ли это как сделать по-простому, чтобы не плодить дополнительных div-контейнеров?
Дополнительно:
https://codepen.io/Vlatqa/pen/GRzaONe
так они у вас не по центру
https://codepen.io/ewgeniq-awdeewa/pen/poGMwjX
вот так как вариант по центру будет) смотря какая вообще цель и какие там блоки будут с каким контентом, так то еще есть несколько способов.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для выравнивания элементов во flex контейнере можно использовать свойства justify-content и align-items.
1. Для горизонтального выравнивания элементов в контейнере по центру, можно использовать свойство justify-content со значением center:
.container { display: flex; justify-content: center; }
2. Для вертикального выравнивания элементов в контейнере по центру, можно использовать свойство align-items со значением center:
.container { display: flex; align-items: center; }
3. Для одновременного горизонтального и вертикального выравнивания элементов в контейнере по центру, можно комбинировать оба свойства:
.container { display: flex; justify-content: center; align-items: center; }
4. Также можно использовать свойство align-self для выравнивания отдельных элементов в контейнере:
.item { align-self: center; /* выравнивание элемента по центру */ }
Эти примеры помогут вам достичь различных вариантов выравнивания элементов во flex контейнере. Надеюсь, это поможет вам решить вашу проблему с выравниванием в flexbox.