First Code

Курсы программирования

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

display: flex / inline-flex

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

Значение по умолчанию. Контейнер занимает все пустое пространство по горизонтали
1
2
3
4
5
.container {
 display: flex;
}

Свойства для flex-контейнера

justify-content

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

Значение по умолчанию. Все flex-элементы стартуют с начала строки (левого края)
1
2
3
4
5
.container {
 display: flex;
justify-content: flex-start;
}

align-items

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

Значение по умолчанию. Все flex-элементы заполняют всю высоту. Если в контейнере несколько строк, то флекс элементы подстраиваются под самый высоки элемент
1
2
3
4
5
.container {
 display: flex;
 height: 150px; /* высота flex-контейнера */
align-items: stretch;
}

flex-direction

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

Значение по умолчанию. Направление задается по оси x (по горизонтали) слева направо
1
2
3
4
5
.container {
 display: flex;
flex-direction: row;
}

flex-wrap

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

Значение по умолчанию. Не позволяет элеменам переносьться на новую строку
1
2
3
4
5
.container {
 display: flex;
flex-wrap: nowrap;
}
/* задаем ширину всем flex-элементам */
.column {
 width: 33%;
}

Свойства для управления определенными flex-элементами

align-self

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

Значение по умолчанию. Все 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 элементы выводятся в том порядке, в каком они появляются в исходном коде.

Значение первого флекс-элемента (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 - ширина равная относительно ширины содержимого контента

Значение по умолчанию. Ширина равная относительно ширины содержимого контента
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. Флекс-элемент занимает пространство относительно ширины содержимого контента
1
2
3
4
5
.flex-container {
 display: flex;
}
/* выбираем 1 элемент */
.flex-element:nth-child(1) {
 background: var(--color);
flex-grow: 0;
}

flex-shrink

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

Значение по умолчанию у всех элементов - 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;


}