CSS Flexbox #4 Выравнивание вдоль главной оси (Alignment: justify-content)

• Евгений Ковальчук приветствует зрителей на канале Веб Дэв.  

• Видео посвящено выравниванию элементов внутри Flexbox контейнера вдоль главной оси.  

• В предыдущих видео обсуждались свойства Flex Direction и Flex Wrap.  

• Flex Flow комбинирует свойства Flex Direction и Flex Wrap.  

• Применяется для Flex контейнера.  

• Пример: элементы размещаются вертикально и переносятся на новый ряд.  

• Используются три свойства для Flex контейнера и одно для Flex элемента.  

• Выравнивание вдоль основной оси: свойство justify-content.  

• Выравнивание вдоль поперечной оси: свойство align-items.  

• Индивидуальное выравнивание элемента: свойство align-self.  

• Пример: четыре элемента сгруппированы слева.  

• Значения: flex-start, flex-end, center, space, space-around, space-evenly.  

• Space-evenly равномерно распределяет элементы по оси.  

• Пример с вертикальной осью.  

• Значение space-evenly не работает без заданной высоты контейнера.  

• Высота контейнера должна быть задана для корректного выравнивания.  

• Поперечное выравнивание по умолчанию растягивает элементы.  

• Значения: space-first, space-last, space-evenly, space-around.  

• Основная ось может быть изменена на вертикальную с помощью flex-direction-reverse.  

• Код урока доступен в репозитории курса.  

• Призыв поставить лайк и подписаться на канал.