CSS Academy · Урок

Сокращённые записи flex

Освойте сокращённую запись flex и разберитесь в распространённых значениях: flex: 1, flex: none и flex: auto.

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

Повторение сокращённой записи flex

Сокращённая запись flex задаёт flex-grow, flex-shrink и flex-basis одним объявлением. Понимание вариантов сокращённой записи необходимо для создания реальных макетов.

flex: 1

flex: 1 эквивалентно flex: 1 1 0%. Элементы начинают с нулевого базового размера и равномерно увеличиваются, заполняя доступное пространство. Это наиболее распространённая сокращённая запись для равных столбцов.

<div class="equal-cols">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

flex: auto

flex: auto = flex: 1 1 auto. Элементы начинают с естественного размера содержимого, а затем пропорционально увеличиваются или сжимаются. При увеличении более широкое содержимое получает больше места.

<div class="nav-links">
  <a href="#">Home</a>
  <a href="#">About Us</a>
  <a href="#">Contact</a>
</div>

flex: none

flex: none = flex: 0 0 auto. Элемент является жёстким — он не увеличивается и не сжимается. Его размер определяется естественной шириной содержимого или явно заданными шириной и высотой.

<div class="row">
  <div class="logo">Logo</div>
  <div>Flexible content</div>
</div>

flex: 0 0 Xpx

Элемент фиксированного размера, не участвующий в распределении свободного пространства. Это наиболее явный способ создать боковые панели с точной шириной:

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

flex: 1 и flex: 1 1 auto

Главное различие: при flex: 1 (базовый размер 0%) все элементы начинают с нулевого размера и увеличиваются пропорционально. При flex: 1 1 auto элементы начинают с естественного размера содержимого, а затем увеличиваются. Это влияет на распределение оставшегося пространства.

Соотношение flex: 2

Используйте неодинаковые значения flex-grow для пропорционального распределения:

<div class="split">
  <div class="main">Main (2/3)</div>
  <div class="side">Side (1/3)</div>
</div>

Сочетание фиксированных и гибких элементов

Наиболее распространённый практический шаблон: фиксированная боковая панель и гибкое основное содержимое:

<div class="layout">
  <div class="sidebar">Sidebar 280px</div>
  <div class="content">Flexible content</div>
</div>

Приём с min-width: 0 во флексбоксе

Для элементов флексбокса по умолчанию задано min-width: auto. Это может не позволить им сжаться меньше размера содержимого. Задайте min-width: 0 для элементов, которые должны свободно сжиматься, например для контейнеров текста с усечением.

<div class="row">
  <div class="text-col">This is a very long line of text that needs to truncate with an ellipsis inside a flex item.</div>
</div>

Шаблон сетки карточек

Адаптивная сетка карточек с гибкими, но ограниченными размерами карточек:

<div class="card-grid">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

Отладка сокращённой записи flex

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

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

Во что разворачивается flex: auto?

Повторение

Запомните основные сокращённые записи flex: flex: 1 (равные столбцы, начинающиеся с нулевого размера), flex: auto (увеличение от естественного размера), flex: none (жёсткий размер), flex: 0 0 Xpx (фиксированный размер). Используйте min-width: 0 для дочерних элементов флексбокса, содержащих текст с усечением. Сочетайте фиксированные и гибкие элементы для классических макетов с боковой панелью.

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

Урок «Сокращённые записи flex» бесплатный?

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

Чему я научусь в уроке «Сокращённые записи flex»?

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

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

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

Сколько времени занимает урок «Сокращённые записи flex»?

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

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

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

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

← Назад к CSS Academy