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

display: flex / inline-flex

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

Применение значений flex или inline-flex в свойстве display активирует flex-контекст, и все прямые дочерние элементы немедленно выстраиваются вдоль главной оси, которая по умолчанию горизонтальна.

.flex_container {
    display: flex;
}
.flex_element {
    width: auto;
    magrin: 5px;
}

flex-direction

Свойство flex-direction - это одно из ключевых свойств, которое определяет направление главной оси, тем самым задавая ориентацию flex-элементов внутри контейнера. Выбор направления напрямую влияет на то, как будут интерпретироваться свойства justify-content и flex-grow/flex-shrink.

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

flex-wrap

Свойство flex-wrap - контролирует, должны ли flex-элементы принудительно оставаться в одной линии или могут переноситься на новые, если для них недостаточно места в контейнере. Использование wrap является фундаментальным для создания адаптивных макетов, которые корректно отображаются на экранах разного размера.

.flex_container {
    display: flex;
    flex-wrap: nowrap;
}
.flex_element {
    width: 33.3333%;
}

justify-content

Свойство justify-content - это свойство отвечает за выравнивание flex-элементов вдоль главной оси (по умолчанию по горизонтали). Оно распределяет свободное пространство, оставшееся после того, как все элементы заняли свою фиксированную или гибкую ширину.

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

align-items

Свойство align-items - это свойство определяет, как flex-элементы выравниваются вдоль поперечной оси (перпендикулярной главной). Для flex-direction: row поперечная ось — вертикальная, для column — горизонтальная.

.flex_container {
    display: flex;
    align-items: stretch;
}

align-content

Свойство align-content - это свойство вступает в игру только когда у контейнера есть несколько строк flex-элементов (т.е. при flex-wrap: wrap или wrap-reverse). Оно управляет распределением свободного пространства вдоль поперечной оси между этими строками, аналогично тому, как justify-content распределяет пространство вдоль главной оси для отдельных элементов.

.flex_container {
    height: 350px;
    display: flex;
    flex-wrap: wrap;
    align-content: stretch
}

column-gap

Определяет расстояние между колонками (элементами в одной строке).

.flex_container {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0px;
}

row-gap

Определяет расстояние между строками в flex-контейнере.

.flex_container {
    display: flex;
    fler-wrap: 'wrap';
    row-gap: 0px;
}

gap

Универсальное свойство, которое одновременно задает отступы и между строками, и между колонками. Можно указать одно значение для обоих отступов или два: gap: <row-gap> <column-gap>;.

.flex_container {
    display: flex;
    fler-wrap: 'wrap';
    gap: 0px;
}
.flex_element {
    width: 1 1 calc(25% - 0px);
}

align-self

Свойство align-self - позволяет переопределить выравнивание по поперечной оси для отдельного элемента, установленное свойством align-items у контейнера.

Принимает те же значения, что и align-items (auto, flex-start, flex-end, center, baseline, stretch). Значение auto (по умолчанию) наследует поведение от align-items контейнера. С помощью этого свойства можно, например, прижать один элемент к низу контейнера, в то время как все остальные выровнены по центру.

.flex_container {
    display: flex;
}
.flex_element:nth-child(2) {
    align-self: stretch;
}

order

Свойство order - позволяет управлять порядком отображения flex-элементов внутри контейнера без изменения их расположения в исходном HTML-коде (DOM). По умолчанию все элементы имеют order: 0.

Элементы сортируются в порядке возрастания значения order. Элементы с одинаковым значением order отображаются в том порядке, в котором они находятся в исходном коде. Можно задавать как положительные, так и отрицательные значения. Это мощный инструмент для перестановки блоков, например, в адаптивном дизайне для мобильных устройств.

.flex_container {
    display: flex;
}
.flex_element:nth-child(1) { order: 1; }
.flex_element:nth-child(2) { order: 2; }
.flex_element:nth-child(3) { order: 3; }
.flex_element:nth-child(4) { order: 4; }
.flex_element:nth-child(5) { order: 5; }

flex-basis

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

Значения: Может быть задан в абсолютных единицах (например, 200px), относительных (50%), или ключевыми словами (auto, content). auto (по умолчанию): Размер основывается на размере элемента (width/height), если он задан. Если нет — рассчитывается исходя из содержимого (content). content: Размер рассчитывается исключительно на основе содержимого элемента, игнорируя явно заданные width/height.

.flex_container {
    display: flex;
}
.flex_element:nth-child(3) { 
    flex-basis: auto; 
}

flex-grow

Свойство flex-grow - определяет коэффициент роста элемента. Управляет тем, какую долю от всего свободного пространства внутри контейнера по главной оси может занять данный элемент, если такое пространство есть. Принимает безразмерное число (по умолчанию 0). Отрицательные значения недопустимы.

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

.flex_container {
    display: flex;
}
.flex_element:nth-child(3) { 
    flex-grow: 0; 
}

flex-shrink

Свойство flex-shrink - определяет коэффициент сжатия элемента. Управляет тем, насколько элемент будет сжиматься относительно других элементов, если для них не хватает места в контейнере (переполнение). Принимает безразмерное число (по умолчанию 1). Отрицательные значения недопустимы.

Как работает: Значение 0 запрещает элементу сжиматься, и он будет сохранять свой исходный размер (flex-basis), в то время как другие элементы с flex-shrink: 1 будут уменьшаться. Если одному элементу задать flex-shrink: 3, а другому 1, то при нехватке места первый будет сжиматься в три раза сильнее второго.

.flex_container {
    display: flex;
}
.flex_element:nth-child(3) { 
    flex-basis: 300px;
    flex-shrink: 1; 
}

flex

Свойство flex - это сокращенное свойство, которое объединяет flex-grow, flex-shrink и flex-basis в одной записи. Варианты использования: flex: auto; - Эквивалентно flex: 1 1 auto;. Элемент может и расти, и сжиматься. flex: none; - эквивалентно flex: 0 0 auto;. Элемент негибкий, его размер жестко определяется width/height или содержимым.

.flex_container {
    display: flex;
}
.flex_element:nth-child(3) { 
    flex: 0 1 auto; 
}