В прошлой лекции мы разобрали основы Flexbox. Теперь переходим к более гибким настройкам: перенос строк, расстояния между элементами, управление размером и порядком.

1. flex-wrap — перенос на новую строку

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

Возможные значения:

• nowrap — без переноса (по умолчанию)
• wrap — перенос на новую строку
• wrap-reverse — перенос на новую строку в обратном порядке

flex-wrap: nowrap (по умолчанию)

.container {
    display: flex;
    flex-wrap: nowrap;
}

flex-wrap: wrap

.container {
    display: flex;
    flex-wrap: wrap;
}

2. gap — расстояние между элементами

Задаёт отступы между флекс-элементами (работает и в Grid). Не добавляет отступы по краям.

.container {
    display: flex;
    gap: 20px;
}

3. align-self — выравнивание одного элемента

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

Возможные значения:

• stretch — растянуть на всю высоту (по умолчанию)
• flex-start — прижать к началу
• flex-end — прижать к концу
• center — по центру
• baseline — по базовой линии текста

align-self: stretch (по умолчанию)

.container {
    display: flex;
    align-items: flex-start;
}
.special {
    align-self: stretch;
}

align-self: center

.container {
    display: flex;
    align-items: flex-start;
}
.special {
    align-self: center;
}

4. flex-grow — как элемент занимает лишнее место

Определяет, как элемент будет растягиваться, если есть свободное место. Значение — число (0, 1, 2...). По умолчанию 0 — элемент не растягивается.

.container {
    display: flex;
}
.item1 {
    flex-grow: 1;
}
.item2 {
    flex-grow: 2;
}
.item3 {
    flex-grow: 0;
}

5. flex-shrink — как элемент сжимается при нехватке места

Определяет, как элемент будет сжиматься, если места недостаточно. По умолчанию 1 — все сжимаются равномерно. 0 — не сжимается.

.container {
    display: flex;
    width: 300px;
}
.item1 {
    width: 150px;
    flex-shrink: 0;
}
.item2 {
    width: 150px;
    flex-shrink: 1;
}

6. order — изменение порядка элементов

Позволяет менять порядок элементов без изменения HTML. По умолчанию все элементы имеют order: 0. Чем меньше число, тем элемент выше.

.container {
    display: flex;
}
.item1 {
    order: 3;
}
.item2 {
    order: 1;
}
.item3 {
    order: 2;
}

7. Сокращённая запись flex

Свойство flex объединяет три свойства в одном: flex-grow, flex-shrink и flex-basis (базовый размер элемента).

Синтаксис:

• flex: 1; — flex-grow: 1, flex-shrink: 1, flex-basis: 0
• flex: 0 1 auto; — значения по умолчанию
• flex: 2 0 100px; — flex-grow: 2, flex-shrink: 0, flex-basis: 100px

.item {
    flex: 1;           /* займёт всё доступное место */
}
.item2 {
    flex: 0 1 auto;    /* поведение по умолчанию */
}
.item3 {
    flex: 2 0 150px;   /* растянется в 2 раза больше, минимальная ширина 150px */
}