CSS Academy · Урок

Рост, сжатие и базовый размер Flex

Управляйте ростом и сжатием элементов flex и задавайте их базовый размер с помощью сокращённого свойства flex.

«Рост, сжатие и базовый размер Flex» — бесплатный урок CSS Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

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

Сокращённая запись flex для флекс-элементов задаёт три значения: flex-grow, flex-shrink, flex-basis.

<div style="display:flex; gap:8px">
    <div class="item">flex: 1 1 auto</div>
    <div style="width:80px">Fixed 80px</div>
  </div>

flex-basis

flex-basis задаёт исходный размер флекс-элемента до его увеличения или уменьшения. В направлении row это свойство переопределяет width. Значение auto использует ширину элемента или размер его содержимого.

<div style="display:flex; gap:8px">
    <div class="sidebar">Sidebar (250px basis)</div>
    <div class="main">Main (auto basis)</div>
  </div>

flex-grow

flex-grow определяет, насколько элемент увеличивается относительно соседних элементов, если доступно свободное пространство. Значение 0 означает отсутствие увеличения. При больших значениях элемент получает пропорционально больше места.

<div style="display:flex; gap:8px">
    <div class="main">Main (grow:2)</div>
    <div class="aside">Aside (grow:1)</div>
    <div class="fixed">Fixed (grow:0)</div>
  </div>

Пример flex-grow

Если в контейнере есть 300px свободного пространства, а для двух элементов заданы flex-grow 1 и 2, первый получит дополнительно 100px, а второй — 200px (соотношение 1:2).

flex-shrink

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

<div style="display:flex; gap:8px">
    <div class="logo">Logo</div>
    <div class="search">Search input takes remaining space</div>
  </div>

Распространённые значения сокращённой записи flex

Запомните эти распространённые шаблоны:

flex: 1 = одинаковые увеличение и уменьшение, базовый размер 0%
flex: auto = flex: 1 1 auto
flex: none = flex: 0 0 auto (жёсткий размер)
flex: 0 0 200px = фиксированный размер 200px, без увеличения и уменьшения

flex: 1 — равномерное распределение

Задание flex: 1 всем дочерним элементам равномерно делит доступное пространство. Базовый размер становится равным 0%, поэтому элементы увеличиваются с нуля и пропорционально делят пространство.

<div class="equal-columns" style="display:flex; gap:8px">
    <div class="col">Column A</div>
    <div class="col">Column B</div>
    <div class="col">Column C</div>
  </div>

flex-basis и width

flex-basis имеет приоритет над width в направлении главной оси. Если задать оба свойства, приоритет будет у flex-basis (если только flex-basis не равен auto; в этом случае свойство использует width).

Внутренний и внешний размеры

Когда задано flex-basis: 0 (как при flex: 1), элемент начинает с нулевого размера и увеличивается пропорционально — это настоящее пропорциональное распределение. При flex-basis: auto элементы начинают с естественного размера содержимого, а затем увеличиваются.

Шаблон «святая троица»

Классическая раскладка: фиксированная боковая панель, гибкая основная область и фиксированная боковая панель:

<div class="layout">
    <div class="left-sidebar">Left</div>
    <div class="main-content">Main</div>
    <div class="right-sidebar">Right</div>
  </div>

min-width и max-width во флексбоксе

Используйте min-width и max-width вместе с flex-grow, чтобы управлять пределами увеличения:

<div style="display:flex; gap:8px">
    <div class="card">Responsive Card</div>
  </div>

Быстрая проверка

Для элемента задано flex: 0 0 200px. Что это означает?

Итоги

flex-grow пропорционально распределяет дополнительное пространство. flex-shrink управляет сжатием элементов. flex-basis задаёт исходный размер. Сокращённая запись flex: 1 включает равномерное распределение пространства. Используйте flex: 0 0 Xpx для элементов фиксированного размера и flex: 1 для гибких элементов в одном контейнере.

Часто задаваемые вопросы

Урок «Рост, сжатие и базовый размер Flex» бесплатный?

Да — полный текст урока «Рост, сжатие и базовый размер Flex» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Рост, сжатие и базовый размер Flex»?

Управляйте ростом и сжатием элементов flex и задавайте их базовый размер с помощью сокращённого свойства flex. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Рост, сжатие и базовый размер Flex»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к CSS Academy