Все свойства модуля CSS Flexbox

display: flex / inline-flex

Основное свойство для flex-конейнера без которого остальные свойства работать не будут. При установке данного свойства все блоки внутри данного контейнера становятся флекс-элементами и выстраиваются в одну линию.

flex Контейнер занимает все пустое пространство по горизонтали inline-flex Ширина контейнера ограничивается его контентом block Значение block вставленно ради примера, что бы можно было посмотреть как распологались блоки до применения flex

Значение по умолчанию. Контейнер занимает все пустое пространство по горизонтали

1

2

3

4

5

.flex_container {
display: flex;
}

justify-content

Отвечает за положение элементов в строке относительно ширины контейнера (по горизонтали)

flex-start Значение по умолчанию. Все flex-элементы стартуют с начала (левого края) start Значение по умолчанию. Все flex-элементы стартуют с начала (левого края). Значение работает также как и flex-start flex-end Все flex-элементы стартуют с конца (правого края) end Все flex-элементы стартуют с конца (правого края). Значение работает также как и flex-end center Все flex-элементы становятся по центру. Элементы не должны занимать всю ширину контейнера space-between Равномерно распределяет все элементы по ширине flex-контейнера. Первый элемент вначале, последний в конце space-around Равномерно распределяет все элементы по ширине flex-контейнера. Все элементы имеют полуразмерное пространство space-evenly Равномерно распределяет все элементы по ширине flex-контейнера. Все элементы имеют равное пространство вокру

Значение по умолчанию. Все flex-элементы стартуют с начала строки (левого края)

1

2

3

4

5

.flex_container {
display: flex;
justify-content: flex-start;
}

align-items

Отвечает за положение элементов в строке относительно высоты контейнера (по вертикали)

stretch Значение по умолчанию. Все flex-элементы заполняют всё доступное пространство контейнера. Если в контейнере несколько строк, то элементы подстраиваются под самый высоки элемент flex-start Значение flex-start позиционирует элементы по верхнему краю. При этом высота флекс-элементов становится равной относительной высоты содержимого контента start Значение flex-start позиционирует элементы по верхнему краю. При этом высота флекс-элементов становится равной относительной высоты содержимого контента. Значение работает также как и flex-start flex-end Значение flex-end позиционирует элементы по нижнему краю. При этом высота флекс-элементов становится равной относительной высоты содержимого контента end Значение flex-end позиционирует элементы по нижнему краю. При этом высота флекс-элементов становится равной относительной высоты содержимого контента. Значение работает также как и flex-end center Значение flex-end позиционирует элементы по центру. При этом высота флекс-элементов становится равной относительной высоты содержимого контента baseline Элементы выравниваются по их базовой линии. Если размер контента флекс-элементов разный, то при данном значении они выравниваются таким образом, чтобы нижняя часть контента находилать на одной линии

Значение по умолчанию. Все flex-элементы заполняют всю высоту. Если в контейнере несколько строк, то флекс элементы подстраиваются под самый высоки элемент

1

2

3

4

5

.flex_container {
display: flex;
height: 150px; /* высота flex-контейнера */
align-items: stretch;
}

flex-direction

Задаёт направление основных осей в контейнере и тем самым определяет положение флекс-элементов в контейнере

row Значение по умолчанию. Направление задается по оси x (по горизонтали) слева направо row-reverse Значение row-reverse является полной противоположностью значения row. Флекс элементы распологаются справо налево column Главная ось располагается вертикально и элементы располагаются сверху вниз column-reverse Значение column-reverse является полной противоположностью значения column. Главная ось располагается вертикально и элементы располагаются снизу вверх

Значение по умолчанию. Направление задается по оси x (по горизонтали) слева направо

1

2

3

4

5

.flex_container {
display: flex;
flex-direction: row;
}

flex-wrap

Указывает, как будут располагаться флекс-элементы, в одной строке либо переноситься на новую строку

nowrap Значение по умолчанию. Не позволяет элеменам переносьться на новую строку wrap Элементы переносятся на новую строку, если их ширина превышает ширину контейнера wrap-reverse Элементы переносятся на новую строку и начинаются с противоположной стророны

Значение по умолчанию. Не позволяет элеменам переносьться на новую строку

1

2

3

4

5

.flex_container {
display: flex;
flex-wrap: nowrap;
}
/* задаем ширину всем flex-элементам */
.flex_element {
width: 33%;
}

align-self

Отвечает за положение определенного элемента в строке относительно высоты контейнера (по вертикали). Принцип работы такойже как и у свойства align-self, только действует на конкретный элемент. Все значения такиеже как и у свойства align-items

stretch Значение по умолчанию. flex-элемент заполняют всё доступное пространство контейнера. Если в контейнере несколько строк, то элементы подстраиваются под самый высоки элемент flex-start Значение flex-start позиционирует элемент по верхнему краю. При этом высота флекс-элементов становится равной относительной высоты содержимого контента flex-end Значение flex-end позиционирует элемент по нижнему краю. При этом высота флекс-элементов становится равной относительной высоты содержимого контента center Значение flex-end позиционирует элемент по центру. При этом высота флекс-элемента становится равной относительной высоты содержимого контента baseline Элемент выравнивается по их базовой линии. Если размер контента флекс-элементов разный, то при данном значении они выравниваются таким образом, чтобы нижняя часть контента находилать на одной линии

Значение по умолчанию. Все flex-элементы заполняют всю высоту. Если в контейнере несколько строк, то флекс элементы подстраиваются под самый высоки элемент

1

2

3

4

5

.flex_container {
display: flex;
height: 150px; /* высотуа flex-контейнера */
}
/* выбираем 2 элемент */
.flex_element:nth-child(2) {
background: var(--color);
align-self: stretch;
}

order

Задает порядок флекс-элемента. Нумерация начинается с 1, т.е. первый флекс-элемент будет (order: 1;). Если Вы хотите установить какой-либо элемент перед первым элементом необходимо указать значение меньше 1 (order: 0) либо обоим элементам задать свойство order. При равных значениях order элементы выводятся в том порядке, в каком они появляются в исходном коде.

1 Значение первого флекс-элемента (order: 1), что бы установить второй элемент перед первым необходимо установить (order: 0). Если установить (order: 1), то оно будет совпадать со значением первого элемента, и первый станет тот элемент, который первый стоит в коде 2 Значение по умолчанию 3 Для того чтобы поменять местами элементы 2 и 3 нам необходимо установить значение больше 3 т.е. (order: 4). Так как при равных значениях элементы выводятся в том порядке, в каком они стоят в коде 4 Для того чтобы поставить 2 элемент на 4 позицию нам необходимо установить значение больше 4 т.е. (order: 5). Так как при равных значениях элементы выводятся в том порядке, в каком они стоят в коде 5 Для того чтобы поменять местами элементы 2 и 3 нам необходимо установить значение больше 5 т.е. (order: 6). Так как при равных значениях элементы выводятся в том порядке, в каком они стоят в коде

Значение первого флекс-элемента (order: 1), что бы установить второй элемент перед первым необходимо установить (order: 0). Если установить (order: 1), то оно будет совпадать со значением первого элемента, и первыи станет тот элемент, который первый стоит в коде

1

2

3

4

5

.flex_container {
display: flex;
}
/* выбираем 2 элемент */
.flex_element:nth-child(2) {
background: var(--color);
order: 2;
}

flex-basis

Задает минимальную ширину элементу в px или %, auto - ширина равная относительно ширины содержимого контента

auto Значение по умолчанию. Ширина равная относительно ширины содержимого контента 100% Указываем минимальную ширину элемента 100%. Элемент занимает все пустое пространство контейнера 50% Указываем минимальную ширину элемента 50%. Элемент занимает половину контейнера 200px Указываем минимальную ширину элемента 200px

Значение по умолчанию. Ширина равная относительно ширины содержимого контента

1

2

3

4

5

.flex_container {
display: flex;
}
/* выбираем 1 элемент */
.flex_element:nth-child(1) {
background: var(--color);
flex-basis: auto;
}

flex-grow

Определяет, сколько пространства может занимать флекс внутри контейнера. В качестве значения принимаются числа, они задают пропорции каждого флекса. К примеру, если для всех элементов установлено значение 1, то они получатся равного размера. Если какой-то элемент получил значение 2, то его размер будет в два раза больше остальных.

0 Значение по умолчанию у всех элементов - 0. Флекс-элемент занимает пространство относительно ширины содержимого контента 1 Элемент занимает все пустое пространство контейнера

Значение по умолчанию у всех элементов - 0. Флекс-элемент занимает пространство относительно ширины содержимого контента

1

2

3

4

5

.flex_container {
display: flex;
width: 100%;
}
/* выбираем 1 элемент */
.flex_element:nth-child(1) {
background: var(--color);
flex-grow: 0;
}

flex-shrink

Устанавливает коэффициент сжатия флексов в контейнере и задаёт, насколько элемент будет уменьшаться по отношению к другим флексам, чтобы разместить все элементы в одну строку. Принимаются целые (1, 2, 3,…) или дробные числа (например: 0.6). Отрицательные значения игнорируются.

1 Значение по умолчанию у всех элементов - 1. Позволяет элементу уменьшаться при уменьшении контейнера 0 Не позволяет элементу уменьшаться при уменьшении контейнера

Значение по умолчанию у всех элементов - 1. Не позволяет элементу уменьшаться при уменьшении экрана

1

2

3

4

5

.flex_container {
display: flex;
width: 100%;
}
/* выбираем 1 элемент */
.flex_element:nth-child(1) {
background: var(--color);
/* устанавливаем базовую ширину 300px*/
flex-basis: 300px;
flex-shrink: 1;
}

flex

Свойство flex - это сокращенное свойство, определяющее способность гибкого элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства. Это свойство доновременно устанавливает значения для flex-grow, flex-shrink и flex-basis.

flex:

Введите значения в поля. Первое поле устанавливает значения для свойста flex-grow, второе для flex-shrink и третье для flex-basis.

1

2

3

4

5

.flex_container {
display: flex;
width: 100%;
}
/* выбираем 1 элемент */
.flex_element:nth-child(1) {
background: var(--color);
flex: 0 1 auto;
}