CSS flexbox

Последнее обновление на 16.12.2022

flexbox

Свойство

display: flex;

выравнивает блоки вдоль одной линии по горизонтали (главная ось по горизонтали).

display flex

flex-direction

Свойство flex-direction позволяет управлять направлением главной оси. Если добавить ещё свойство flex-direction: column; , то блоки выравниваются вдоль одной линии по вертикали

display: flex;
flex-direction: column;

flex-direction column

по горизонтали (выравнивание по левому верхнему краю браузера)

display: flex;
flex-direction: row;

display flex

поменять порядок блоков на обратный для колонки flex-direction: column-reverse;

display: flex;
flex-direction: column-reverse;
flex-direction column-reverse
поменять порядок блоков на обратный для ряда flex-direction: row-reverse; (выравнивание по правому верхнему краю браузера)
display: flex;
flex-direction: row-reverse;
flex-direction row-reverse
justify-content
Свойство justify-content позволяет выравнивать содержание flex блока
justify-content:center; /* выравнивание по центру */
justify-content: flex-start; /* выравнивание происходит от начала главной оси */
justify-content: flex-end; /* выравнивание происходит от конца главной оси */
При использовании justify-content: space-between; первый и последний элемент выравниваются по самому краю главной оси (край браузера), остальные элементы равномерно распределяются и пространство между ними тоже равномерно заполняется.
justify-content space-between
Свойство justify-content: space-around; все элемент выравниваются равномерно и пространство равномерно распределяется между ними начиная и заканчивая с краев
justify-content space-around
align-items
Еще об свойстве align-items — выравнивание в отличие от свойства justify-content происходит от поперечной оси.

align-items:stretch; /* по умолчанию, элементы растягиваются, в блоках необходимо указать свойство height: auto; , также нужно учитывать свойство

max-width и min-width */
align-items stretch
align-items:flex-start; /* выравнивание по верхнему краю */
align-items flex-start
align-items:flex-end; /* выравнивание по нижниму краю */
align-items flex-end
align-items:center; /* выравнивание по центру */
center flexbox выравнивание по центру
align-items:baseline; /* выравнивание по базовой линии */
align-items baseline
 flex-wrap
Свойство flex-wrap задает поведение блокам, или вдоль одной линии даже если они не помещаются, или смещаются слева направо, если не помещаются в окне браузера.
flex-wrap:nowrap; /* значение по умолчанию, при изменении размера браузера блоки сжимаются, запрет переноса*/
nowrap
flex-wrap:wrap; /* при изменении размера браузера блоки сдвигаются, переносятся вниз*/
flex-wrap wrap
flex-wrap: wrap-reverse;  /* то же, что и wrap, только расположение блоков в обратном порядке, перенос вверх*/
flex-wrap wrap-reverse
flex-flow
Свойство flex-flow объединяет в себе два рассмотренных свойства flex-wrap и flex-direction, пример записи
flex-flow: column wrap;
align-content
Свойство align-content активируется совместно с flex-wrap:wrap; (когда блоки идут в несколько строк и применяется для их выравнивания).
align-content:stretch; /* по умолчанию, блоки растягиваются по вертикали, также нужно учитывать свойство max-width и min-width */
align-content:center; /* выравнивание по центру */
align-content: flex-start; /* выравнивание происходит от начала главной оси */
align-content: flex-end; /* выравнивание происходит от конца главной оси */
align-content: space-between; /* выравнивание между блоками равномерное */
align-content: space-around; /* выравнивание вокруг блоков равномерное */
align-self
Свойство align-self задает уникальное свойство блоку (элементу) и предназначено для выравнивания элементов.
 align-self :stretch; /* блоки растягиваются */
align-self :center; /* выравнивание по центру */
 align-self : flex-start; /* выравнивание происходит от начала главной оси */
 align-self : flex-end; /* выравнивание происходит от конца главной оси */
align-self: baseline; /* выравнивание по базовой линии */
gap
Свойство gap создает между блоками колонок и рядов интервал (раздвигает между собой), пример
gap: 5px;
column-gap
Свойство column-gap создает задает между колонками интервал, пример
column-gap: 5px;
flex-grow
flex-grow задает коэффициент увеличение блока. При flex-grow:1; и более блоки растянутся и заполнят свободное место на всю ширину экрана браузера. По умолчанию flex-grow:0; это значит что блоки не увеличиваются и не заполняют свободное пространство.
Пример
flex-grow:0; /* для красного блока */
flex-grow:0; /* для красного блока */
flex-grow:0; /* для зеленого блока */
grow при нуле
Пример для одинаковых блоков, но разными значениями.
flex-grow:1; /* для красного блока */
flex-grow:5; /* для зеленого блока */
flex-grow:10; /* для синего блока */
grow
flex-shrink
Свойство flex-shrink противоположно свойству flex-grow. Наименьшее значение коэффициента для flexgrow, является наибольшим значением для flex-shrink. По сути, flex-shrink обладает противоположным свойством относительно flex-grow.
flex-shrink:1; /* для красного блока */
flex-shrink:5; /* для зеленого блока */
flex-shrink:10; /* для синего блока */
Свойство flex-basis задает базовую ширину блока через width:30%; и например для остальных блоков width:auto;. Свойство flex (по умолчанию flex: 0 1 auto;) задается или одним значением -grow, или двумя — grow, shrink, или тремя значениями grow, shrink, basis.
order
Свойство order меняет порядок блоков, например
order:2; /* для красного блока */
order :1; /* для зеленого блока */
order :0; /* для синего блока */

order порядок блоков

Ваш комментарий будет первым

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *