13. Флексы часть 1. Основные свойства CSS position: flex. flex-direction, wrap, justify, align

Описание

В данном видео по свойству CSS мы рассмотрим свойство CSS display: flex.
Поговорим о свойствах флексов, таких как flex-direction, wrap, justify, align.
Посмотрим данные свойства на примерах.

Свойства. использованные в уроке:

display: flex; - вешается на контейнер-родитель. Передает всем дочерним элементам свойства флекса.

display: inline-flex - то же самое что и flex, но дает возможность выстроить container в строку.

flex-direction: row, row-reverse, column, column-reverse - определяет направление главной оси

flex-wrap: nowrap; - дефолтное значение, запрещает перенос блоков на следующую строку

flex-wrap: wrap; - разрешает перенос блоков на следующую строку

justify-content: flex-start; - передвигает все колонки насколько это возможно к горизонтальному
началу контейнера

justify-content: flex-end; - передвигает все колонки насколько это возможно к горизонтальному
концу контейнера

justify-content: center; - выравнивает все колонки посередине контейнера

justify-content: space-around; - одинарные отступы по краям, двойные между flex-item;

justify-content: space-between; - нет отступов по краям, одинаковые отступы между flex-item;

justify-content: space-evenly; - одинаковые отступы по краям и между flex-item;

align-items: stretch; - растягивает блоки на всю строку.

align-items: baseline; - выравнивает блоки по первой строке текста;




Я на VK.com: https://vkvideo.ru/@club228503201

Больше контента на нашем Boosty: https://boosty.to/ya_u_mami_programmist