Визуализируйте flex-контейнер и элементы, чтобы ясно увидеть, как дочерние элементы позиционируются внутри flex-контейнера
Настройте свойства flexbox для наблюдения различных эффектов выравнивания и распределения
Направление flex элементов
Выравнивание элементов вдоль поперечной оси
Выравнивание и распределение вдоль главной оси
Переносятся ли элементы на новые строки
Выравнивание перенесенных строк вдоль поперечной оси
flex-direction: row | align-items: center | justify-content: flex-start | flex-wrap: nowrap | align-content: stretchFlex-контейнер с элементами разных размеров для демонстрации эффектов выравнивания flexbox
row - Элементы располагаются горизонтально (слева направо)row-reverse - Элементы располагаются горизонтально (справа налево)column - Элементы располагаются вертикально (сверху вниз)column-reverse - Элементы располагаются вертикально (снизу вверх)nowrap - Элементы остаются в одной строкеwrap - Элементы переносятся на новые строки по мере необходимостиwrap-reverse - Элементы переносятся на новые строки в обратном порядкеflex-start - Выровнять элементы к началу поперечной осиcenter - Центрировать элементы по поперечной осиflex-end - Выровнять элементы к концу поперечной осиstretch - Растянуть элементы для заполнения поперечной осиbaseline - Выровнять элементы по их базовой линииflex-start - Сгруппировать элементы в начале главной осиcenter - Центрировать элементы по главной осиflex-end - Сгруппировать элементы в конце главной осиspace-* - Распределить пространство между элементами