> For the complete documentation index, see [llms.txt](https://appsecurity.gitbook.io/devops/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://appsecurity.gitbook.io/devops/ppc/ppc-langs/frontend/css/verstka/flexbox-verstka.md).

# Flexbox верстка

## Введение

`Flexbox` — это общее название для модуля Flexible Box Layout, который имеется в CSS3. Данный модуль определяет особый режим верстки пользовательского интерфейса, который называется `flex layout`. В этом плане Flexbox предоставляет иной подход к созданию пользовательского интерфейса, который отличается от табличной или блочной верстки.

Его создали, чтобы удобно и быстро распределять и выравнивать элементы. Развернутое описание стандарта по модулю можно посмотреть в [спецификации](https://drafts.csswg.org/css-flexbox/).

Основными составляющими компоновки flexbox являются **flex-контейнер** (flex container) и **flex-элементы** (flex items). Flex container представляет некоторый элемент, внутри которого размещены flex-элементы.

Flexbox управляет **пустотой** вокруг вложенных контейнеров! Таким образом, `margin: auto` центрирует дочерние элементы по вертикали и горизонтали.

## Создание flex-контейнера

Для создания flex-контейнера необходимо присвоить его стилевому свойству `display` одно из двух значений: `flex (блочный элемент)` или `inline-flex (строчный элемент)`.

Создадим простейшую веб-страницу, которая применяет flexbox:

```markup
<div class="flex-container">
    <div class="flex-item color1">Flex Item 1</div>
    <div class="flex-item color2">Flex Item 2</div>
    <div class="flex-item color3">Flex Item 3</div>
</div>
```

```css
.flex-container {
    display: flex;
}
.flex-item {
    text-align:center;
    font-size: 1.1em;
    padding: 1.5em;
    color: white;
}
.color1 {background-color: #675BA7;}
.color2 {background-color: #9BC850;}
.color3 {background-color: #A62E5C;}
```

### Направление flex-direction

Flex-элементы во flex-контейнере могут иметь определенное направление, а именно они могут располагаться в виде строк или в виде столбцов. Для управления направлением элементов CSS3 предоставляет свойство `flex-direction`. Оно определяет направление элементов и может принимать следующие значения:

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

### flex-wrap

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

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

### flex-flow. order. Порядок элементов

Свойство `flex-flow` позволяет установить значения сразу для обоих свойств `flex-direction` и `flex-wrap`. Оно имеет следующий формальный синтаксис:

```css
flex-flow: [flex-direction] [flex-wrap]
```

Причем второе свойство — `flex-wrap` можно в принципе опустить, тогда для него будет использоваться значение по умолчанию - `nowrap`.

Свойство `order` позволяет установить группу для flex-элемента, позволяя тем самым переопределить его позицию внутри flex-контейнера. В качестве значения свойство принимает числовой порядок группы. К одной группе может принадлежать несколько элементов.

Например, элементы в группе 0 располагаются перед элементами с группой 1, а элементы с группой 1 располагаются перед элементами с группой 2 и так далее.

## Выравнивание элементов

### justify-content

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

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

Для управления этими ситуациями мы можем применять свойство `justify-conten`. Оно выравнивает элементы вдоль основной оси — `main axis` (при расположении в виде строки по горизонтали, при расположении в виде столбца - по вертикали) и принимает следующие значения:

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

### align-items и align-self

Свойство `align-items` также выравнивает элементы, но уже по поперечной оси (`cross axis`) (при расположении в виде строки по вертикали, при расположении в виде столбца — по горизонтали). Это свойство может принимать следующие значения:

* `stretch`: значение по умолчанию, при котором flex-элементы растягиваются по всей высоте (при расположении в строку) или по всей ширине (при расположении в столбик) flex-контейнера
* `flex-start`: элементы выравниваются по верхнему краю (при расположении в строку) или по левому краю (при расположении в столбик) flex-контейнера
* `flex-end`: элементы выравниваются по нижнему краю (при расположении в строку) или по правому краю (при расположении в столбик) flex-контейнера
* `center`: элементы выравниваются по центру flex-контейнера
* `baseline`: элементы выравниваются в соответствии со своей базовой линией (середина первого флекс-элемента)

Свойство `align-self` позволяет переопределить значение свойства `align-items` для одного элемента. Оно может принимать все те же значения плюс значение "auto" — значение по умолчанию, при котором элемент получает значение от свойства `align-items`, которое определено в flex-контейнере. Если в контейнере такой стиль не определен, то применяется значение `stretch`.

### align-content

Свойство `align-content` управляет выравниванием рядов (строк и столбцов) во flex-контейнере и поэтому применяется, если свойство `flex-wrap` имеет значение `wrap` или `wrap-reverse`. Свойство `align-content` может иметь следующие значения:

* `stretch`: значение по умолчанию, при котором строки (столбцы) растягиваются, занимая все свободное место
* `flex-start`: строки (столбцы) выравниваются по началу контейнера (для строк - это верхний край, для столбцов - это левый край контейнера)
* `flex-end`: строки (столбцы) выравниваются по концу контейнера (строки - по нижнему краю, столбцы - по правому краю)
* `center`: строки (столбцы) позиционируются по центру контейнера
* `space-between`: строки (столбцы) равномерно распределяются по контейнеру, а между ними образуются одинаковые отступы. Если же имеющегося в контейнере места недостаточно, то действует аналогично значению `flex-start`
* `space-around`: строки (столбцы) равным образом распределяют пространство контейнера, а растояние между первой и последней строкой (столбцом) и границами контейнера составляет половину расстояния между соседними строками (столбцами).

Стоит учитывать, что это свойство имеет смысл, если в контейнере две и больше строки (столбца).

## Управление элементами. flex-basis, flex-shrink и flex-grow

Кроме свойств, устанавливающих выравнивание элементов относительно границ flex-контейнера, есть еще три свойства, которые позволяют управлять элементами:

* `flex-basis`: определяет начальный размер flex-элемента
* `flex-shrink`: определяет, как flex-элемент будет уменьшаться относительно других flex-элементов во flex-контейнере
* `flex-grow`: определяет, как flex-элемент будет увеличиваться относительно других flex-элементов во flex-контейнере

Свойство flex является объединением свойств `flex-basis`, `flex-shrink` и `flex-grow` и имеет следующий формальный синтаксис:

```css
flex: [flex-grow] [flex-shrink] [flex-basis]
```

## Papers and notes

Официальная документация flexbox: <https://www.w3.org/TR/css-flexbox-1/>

Наглядно посмотреть свойства flexbox: <https://codepen.io/justd/full/yydezN/>

Изучение flexbox в формате игры: <https://flexboxfroggy.com/#ru>

Тонкости в flexbox: <https://habr.com/ru/articles/329820/>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://appsecurity.gitbook.io/devops/ppc/ppc-langs/frontend/css/verstka/flexbox-verstka.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.