Flexbox в CSS: как сделать высоту 100% и разметку строк

Быстрый ответ

Для того чтобы flexbox-контейнер занимал 100% доступного вертикального пространства, нужно установить для него min-height: 100vh. Эта команда растянет контейнер на полную высоту окна просмотра. Не забывайте также задать html и body высоту 100%.

html, body {
  height: 100%;
  margin: 0;
}

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

Важно: помните об использовании команды display: flex для flex-контейнера и о применении относительной единицы высоты vh (100vh).

Способы вертикального растягивания элементов с помощью flexbox

Динамическое растягивание flexbox-элементов

Свойство flex-grow позволяет элементам flexbox занимать все свободное пространство в контейнере.

.flex-item {
  flex-grow: 1;
}

Подробнее об этом расскажет наш спикер на видео

Использование CSS Grid в качестве альтернативы

CSS Grid предоставляет более гибкие способы управления распределением пространства и позволяет настраивать высоту контейнера grid так, чтобы она занимала все доступное пространство, с использованием автоматической единицы высоты 'fr' для распределения высоты строк.

.grid-container {
  display: grid;
  height: 100vh;
  grid-template-rows: auto 1fr auto;
}

Избавление от излишних внешних обёрток

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

Применение вложенных flexbox-контейнеров для реализации сложных макетов

Для реализации сложных макетов можно использовать вложенные flexbox-контейнеры, задав для них соответствующие свойства выравнивания justify-content и align-items.

.flex-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

Создание секций, занимающих полную высоту окна просмотра

При создании секций, которые должны занимать всю высоту окна просмотра и оставаться неподвижными при прокрутке, используйте свойство position: fixed.

.fixed-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

Визуализация

Представьте саженец, который вырастает в взрослое дерево:

Первоначально: 🌱 
В итоге: 🌲

Flexbox-контейнер с min-height: 100vh подобен стволу дерева, охватывающему весь вертикальный объём:

html, body { height: 100%; }
#container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

Советы

Использование внутренних отступов для создания пространства вокруг контента

Внутренние отступы (padding) в контейнерах flexbox или grid помогают создавать пространство вокруг элементов, улучшая восприятие контента.

Понимание принципа наследования высоты

Убедитесь, что наследование высоты 100% или 100vh не блокировуется элементами с установленной фиксированной высотой.

Учёт динамически меняющегося контента

Макет должен быть готов к изменениям, обусловленным динамическим контентом. При необходимости предусмотрите механизмы прокрутки и управления переполнением:

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-y: auto;
}

Полезные материалы

1. Полное руководство по Flexbox на CSS-Tricks
2. Основы работы с flexbox в CSS от MDN
3. Решение проблемы с 100% высотой flex-контейнера в Chrome и Safari на Stack Overflow
4. Flexbox Froggy – Игра для обучения CSS flexbox
5. Flexbox на web.dev