CSS Flexbox — это отзывчивый макет дизайна, который помогает эффективно выравнивать HTML-элементы.

Flexbox распределяет элементы внутри их родительского контейнера, даже если размер элементов неизвестен или динамичен (отсюда и термин «flex»).

С этой моделью связаны различные свойства, которые применяются либо к родительскому гибкому контейнеру, либо к дочерним гибким элементам.
В этой статье я постараюсь рассказать обо всех свойствах, которые применяются к flex-контейнеру.
Полностью демонстрационный пример можно посмотреть здесь: https://demo-flexbox.netlify.app/.

При работе с flex элементы выравниваются либо по горизонтали, либо по вертикали.

• Родительский контейнер, содержащий элементы, называется flex-контейнером, а элементы/дочерние элементы — flex-items.
• Когда элементы отображаются в виде flex, они располагаются вдоль двух осей:
• главная ось (main-axis): Направление, по которому располагаются элементы. Это зависит от свойства flex-direction.
• поперечная ось (cross-axis ): Направление, перпендикулярное главной оси. Оно также зависит от свойства flex-direction.
• Высота или ширина flex-контейнера или элемента, в зависимости от направления главной оси, является основным размером элемента.
• Высота или ширина гибкого элемента, в зависимости от направления оси, является его поперечным размером.
• Гибкие элементы располагаются вдоль оси main, начиная от main-start и заканчивая main-end.
• В контейнере имеются гибкие линии вдоль поперечной оси, и элементы располагаются вдоль этих линий от начала поперечной оси к концу поперечной оси.

Для понимания различных свойств гибкого макета воспользуемся следующим кодом:

	

     
1
     
2
     
3
     
4
     
5

Приведенное выше изображение — это выравнивание контейнера в браузере по умолчанию. display: block;

СВОЙСТВА, ПРИМЕНЯЕМЫЕ К FLEX-КОНТЕЙНЕРУ (РОДИТЕЛЮ)

display
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

	
.flex-container {
    display: flex | inline-flex;
    flex-direction: row | row-reverse | column | column-reverse;
    flex-wrap: nowrap | wrap | wrap-reverse;
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
    align-items: stretch | flex-start | flex-end | baseline | stretch;
    align-content: stretch | flex-start | flex-end | center | space-between | space-around;

    flex-flow: <‘flex-direction’> || <‘flex-wrap’>;
}

1. display

Это свойство может принимать следующие значения:

flex: родительский контейнер отображается как контейнер flexbox на уровне блоков, но дочерние элементы размещаются как элементы flex.
inline-flex: дочерние элементы контейнера отображаются как flex-элементы, а сам контейнер — как inline-элемент.

2. flex-direction

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

row: (значение по умолчанию) элементы располагаются слева направо вдоль ряда контейнера.
row-reverse: Элементы располагаются горизонтально, но начальная и конечная строки меняются местами.
column: Элементы располагаются в столбце, сверху вниз.
column-reverse: Элементы расположены вертикально, но начальная и конечная строки перевернуты.

	
.flex-container {
     display: flex;
     flex-direction: row | row-reverse | column | column-reverse
 }

3. flex-wrap

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

• nowrap: (по умолчанию) Элементы либо сжимаются до размеров контейнера, либо переполняются, если не могут сжаться.
• wrap: Элементы заворачиваются в несколько строк сверху вниз, если контейнер недостаточно велик, чтобы вместить все элементы.
• wrap-reverse : Предметы заворачиваются в несколько линий, но снизу вверх. Начальная и конечная линии меняются местами.

	
.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap | wrap | wrap-reverse;
}

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

4. flex-flow

Это сокращение для свойств flex-direction и flex-wrap, определяющее, как элементы должны отображаться по основной и поперечной осям.

Значение по умолчанию для flex-flow — row nowrap; .

	
 .flex-container {
     display: flex;
     flex-flow: row | row-reverse | column | column-reverse || nowrap | wrap | wrap-reverse;
 }

5. justify-content

Это свойство распределяет гибкие элементы по оси main-axis. Оно позволяет занять все свободное пространство вдоль оси main и изменить способ отображения содержимого.
Свойство принимает следующие значения:

• flex-start: (по умолчанию) Элементы выравниваются и упаковываются в начало контейнера по оси main-axis (линия main-start).
• flex-end: Элементы упаковываются в конец контейнера по оси main (линия main-end).
• center: Элементы упаковываются в центр контейнера.
• space-between: Предметы укладываются равномерно с промежутком между собой. Первый предмет размещается на начальной линии, а последний — на конечной.
• space-around: Аналогично варианту space-between, но с обеих сторон начальной и конечной строк также имеется свободное пространство.
• space-evenly: Элементы распределены равномерно с одинаковым расстоянием между собой и между элементом и краями.

	
.flex-container {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

Свойство justify-content выравнивает элементы по основной оси. В данном случае, поскольку главной осью у нас является строка, свойство выравнивает элементы по горизонтали.

6. align-items

Это свойство используется для выравнивания гибких элементов по поперечной оси.
Свойство принимает следующие значения:

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

	
.flex-container {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     align-items: stretch | flex-start | flex-end | center | baseline;
}

7. align-content

Это свойство выравнивает дополнительное пространство между элементами флекса, называемое флекс-линиями, вдоль поперечной оси.
Свойство принимает следующие значения:

• stretch: (по умолчанию) Элементы растягиваются, чтобы занять дополнительное пространство в контейнере по поперечной оси.
• flex-start: Элементы упаковываются в начале поперечной оси контейнера (начальная линия).
• flex-end: Элементы упаковываются в конце поперечной оси контейнера (линия cross-end).
• center: Предметы упаковываются и размещаются в центре поперечной оси.
• space-between: Предметы равномерно размещаются по поперечной оси таким образом, чтобы между ними оставалось свободное пространство. Первый предмет размещается на начальной линии креста, а последний — на конечной.
• space-around: Предметы распределяются вдоль оси таким образом, чтобы вокруг и между ними оставалось свободное пространство.

	
.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; 
    align-items: stretch | flex-start | flex-end | center | space-between | space-around;
}

Аналогично тому, как justify-content выравнивает элементы по оси main, align-content выравнивает элементы flex по оси cross. В данном случае это свойство выравнивает гибкие элементы по вертикали.
Свойство align-content действует только в том случае, если гибкие элементы обернуты в несколько строк.

Спасибо, что прочитали первый блог из серии CSS Flexbox!