Редактор Flexbox
Бесплатный онлайн редактор Flexbox-раскладки, визуальный предпросмотр
Свойства Flexbox
flex-direction: row | column | row-reverse | column-reverse. justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly. align-items: stretch | flex-start | center | flex-end | baseline. flex-wrap: nowrap | wrap. gap: расстояние между элементами.
Как использовать Flexbox-редактор
Настраивайте свойства контейнера — предпросмотр обновляется в реальном времени. Добавляйте или удаляйте элементы. Копируйте CSS.
▶Разница между justify-content и align-items?
justify-content — вдоль главной оси (горизонталь для row). align-items — вдоль поперечной оси.
▶Как центрировать элемент через Flexbox?
display: flex; justify-content: center; align-items: center; — центрирует по горизонтали и вертикали.
▶Что делает flex-wrap?
По умолчанию nowrap — элементы в одну строку. wrap — переносятся на следующую строку при нехватке места.