Что такое флексбокс?
Модуль CSS Flexible Box Layout позволяет нам динамически выравнивать и размещать элементы на наших страницах с большей пользой, чем использование блоков и встроенных блоков. Flexbox использует поперечные оси, чтобы определить, как должны быть расположены элементы, всегда есть главная ось и поперечная ось, перпендикулярная ей. По умолчанию направлением гибкости является строка, что означает, что элементы располагаются слева направо, если мы переключим направление на столбец, элементы будут выполняться сверху вниз.
Выровняйте содержимое и выровняйте элементы
Justify content используется для выравнивания содержимого по главной оси, а align-items выравнивает содержимое по поперечной оси. Содержимое выравнивания может принимать следующие параметры: flex-start, flex-end, center, space-between, space-round и space-evenly. Элементы выравнивания могут принимать: flex-start, flex-end, center, stretch и baseline.
Промежуточный флексбокс
Мы можем использовать свойство align-self, чтобы установить поперечную ось элемента независимо от других элементов, что полезно, если мы хотим разместить один элемент иначе, чем остальные. Мы также можем использовать flex-grow и flex-shrink для изменения размера элементов относительно места, оставшегося в родительском контейнере. Flexgrow определяет, сколько оставшегося пространства должно быть отведено гибкому элементу, flex-shrink будет работать только тогда, когда элементы занимают больше места, чем ширина контейнера.
Закрытие
Flexbox позволяет нам легко упорядочивать наши HTML-элементы! Очень полезный навык для любого веб-разработчика переднего плана, который должен быть в наборе инструментов, счастлив, что изучил его ✌️.
