До сих пор мы управляли контейнером целиком. Но часто нужно настроить сами элементы: сделать одну колонку шире других, разрешить полю ввода растягиваться на всё свободное место, задать карточкам базовую ширину и ровные промежутки между ними. За это отвечают свойства отдельных флекс-элементов и удобное свойство gap. Именно они превращают грубую раскладку в точно выверенный макет.

После этого урока вы сможете управлять тем, как элементы делят пространство контейнера — растягиваются, сжимаются и с каким интервалом стоят.

Что уже умеем / что добавим

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

Что вы узнаете в рамках статьи

• Как разрешить элементу растягиваться через flex-grow.
• Как управлять сжатием через flex-shrink.
• Как задать базовый размер через flex-basis.
• Как использовать краткую запись flex.
• Как задавать промежутки между элементами через gap.

Ключевые термины

• flex-grow — коэффициент растяжения элемента при наличии свободного места.
• flex-shrink — коэффициент сжатия элемента при нехватке места.
• flex-basis — базовый размер элемента до растяжения и сжатия.
• flex — краткая запись трёх свойств: grow, shrink, basis.
• gap — промежуток между флекс-элементами.

Растяжение: flex-grow

Свойство flex-grow задаётся флекс-элементу и определяет, забирает ли он свободное место контейнера. По умолчанию flex-grow: 0 — элемент не растягивается. Значение больше нуля разрешает рост:

.search {
  flex-grow: 1;
}

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

Сжатие: flex-shrink

Свойство flex-shrink — противоположность: оно определяет, насколько элемент готов ужаться, когда места не хватает. По умолчанию flex-shrink: 1 — элементы сжимаются. Значение 0 запрещает сжатие:

.logo {
  flex-shrink: 0;
}

Логотип с flex-shrink: 0 сохранит свой размер даже в тесном ряду, а остальные элементы ужмутся вместо него. Это полезно для элементов, которые нельзя деформировать, — иконок, логотипов, кнопок фиксированного размера. Понимание flex-shrink спасает от ситуации, когда важный элемент вдруг «схлопывается» на узком экране.

Базовый размер: flex-basis и краткая запись flex

Свойство flex-basis задаёт исходный размер элемента вдоль главной оси — до того, как применятся рост и сжатие. Это как «стартовая ширина»:

.card {
  flex-basis: 250px;
}

Чаще всего три свойства объединяют в краткую запись flex в порядке grow, shrink, basis:

.card {
  flex: 1 1 250px;
  /* растёт (1), сжимается (1), базовая ширина 250px */
}

Такая карточка стартует от 250 пикселей, но гибко растягивается и сжимается, заполняя ряд. Комбинация flex: 1 1 250px вместе с flex-wrap: wrap — классический рецепт отзывчивой сетки карточек: они держат примерно нужную ширину и переносятся по мере необходимости.

Промежутки: gap

Свойство gap задаёт расстояние между флекс-элементами. Раньше промежутки делали отступами margin, что было неудобно (крайние элементы получали лишние отступы). gap решает это чисто и просто:

.services {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

Между всеми карточками появится ровный промежуток в 1.5rem — и по горизонтали, и по вертикали при переносе, — а по краям контейнера лишних отступов не будет. Можно задать разные промежутки для строк и колонок: gap: 1rem 2rem (сначала между строками, затем между колонками). gap — современный и рекомендуемый способ расставлять интервалы во флексе.

Применяем в проекте

Настроим карточки услуг. Дадим им базовую ширину с возможностью гибко заполнять ряд и добавим ровные промежутки через gap. Логотипу в шапке запретим сжиматься.

.services {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.card {
  flex: 1 1 250px;
  padding: 1.5rem;
  background-color: #ffffff;
  border-radius: 12px;
}

.logo {
  flex-shrink: 0;
}

Обновите страницу: карточки услуг стоят с ровными промежутками, держат ширину около 250 пикселей, гибко растягиваются, чтобы заполнить строку, и аккуратно переносятся на узком экране. А логотип в шапке больше не ужимается, что бы ни происходило рядом. Секция услуг выглядит как настоящая отзывчивая сетка.

Частые ошибки

• flex-grow на контейнере.
  Эти свойства задаются флекс-элементам, а не контейнеру.
• Ожидание роста без flex-grow.
  По умолчанию элементы не растягиваются; нужно явно задать flex-grow: 1.
• Промежутки через margin вместо gap.
  gap не добавляет лишних отступов по краям и удобнее в поддержке.
• Путаница порядка в краткой записи.
  В flex порядок такой: grow, shrink, basis.

Итоги

Отличная работа — вы завершили раздел про Flexbox! Теперь вы управляете не только контейнером, но и самими элементами: разрешаете им растягиваться через flex-grow, сжиматься через flex-shrink, задаёте базовый размер flex-basis и краткую запись flex, а промежутки расставляете современным gap. Вместе с выравниванием это полный набор для построения гибких макетов. Ваша секция услуг превратилась в аккуратную отзывчивую сетку.

Поздравляем — первый раздел курса позади, и вы уже мыслите макетами! В следующем разделе мы займёмся смыслом разметки: научимся писать семантический HTML, который понятен и браузерам, и поисковикам, и людям.