0Pricing
CSS Academy · Урок

Гибкая ширина в процентах

Используйте ширину в процентах для создания макетов, масштабируемых вместе с контейнером.

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

Зачем нужны гибкие ширины

Макеты с фиксированной шириной (в пикселях) ломаются на экранах, которые уже этой ширины. Гибкие ширины, заданные в процентах, позволяют макетам пропорционально подстраиваться под размер любого контейнера или области просмотра.

Основы процентной ширины

Процентная ширина определяется относительно ширины родительского контейнера. Дочерний элемент с width: 50% всегда будет занимать половину ширины родителя.

<div style="width:300px;border:1px dashed #999;padding:4px;">
  <div class="half-width" style="background:#4f8cff22;border:1px solid #4f8cff;">width: 50%</div>
  <div class="third-width" style="background:#ffb84d22;border:1px solid #ffb84d;">width: 33.333%</div>
</div>

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

При использовании box-sizing: border-box процентные ширины включают внутренние отступы и границу. Это упрощает создание процентных столбцов: 50% действительно означает половину независимо от внутренних отступов.

<div style="width:300px;border:1px dashed #999;">
  <div class="col-half" style="background:#4f8cff22;border:1px solid #4f8cff;">50% including padding/border</div>
</div>

Гибкий макет с двумя столбцами

Простой устаревший макет с плавающими элементами:

<div style="width:100%;overflow:auto;">
  <div class="col" style="background:#4f8cff22;border:1px solid #4f8cff;">Column A</div>
  <div class="col" style="background:#ffb84d22;border:1px solid #ffb84d;">Column B</div>
</div>

Гибкие столбцы с флексбоксом

Использовать флексбокс для создания гибкого макета со столбцами проще:

<div class="flex-row">
  <div class="col-main" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Main (flex: 2)</div>
  <div class="col-side" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Side (flex: 1)</div>
</div>

Процентные внутренние отступы

Процентные внутренние отступы всегда рассчитываются относительно ширины родителя, а не высоты — даже для верхнего и нижнего отступов. Это позволяет применять приёмы с соотношением сторон:

<div class="video-wrapper" style="background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>

Современное задание соотношения сторон

Свойство aspect-ratio заменяет приём с внутренними отступами для сохранения соотношения сторон:

<div class="video-wrapper" style="background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>

max-width в гибком макете

Сочетание процентных ширин с max-width не позволяет строкам становиться слишком широкими на больших экранах:

<article class="article" style="background:#4f8cff11;border:1px solid #4f8cff;padding:8px;">Article column — 90% wide, capped at 800px, centered</article>

Проблема процентной высоты

Процентная высота требует, чтобы для родителя была задана высота. Если у родителя установлено height: auto, процентные высоты дочерних элементов также вычисляются как auto.

Ключевые слова для определения естественного размера

Современный CSS добавляет больше вариантов гибкого задания размеров:

  • min-content: наименьший размер, при котором содержимое помещается
  • max-content: размер, при котором всё содержимое помещается в одну строку
  • fit-content: размер между min-content и max-content
<span class="tag" style="background:#4f8cff22;border:1px solid #4f8cff;display:inline-block;">Tag</span>

Шаблон гибкой сетки

Распространённый вариант гибкой сетки с использованием inline-block (устаревший подход) или современного CSS:

<div class="grid">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;min-height:60px;">A</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;min-height:60px;">B</div>
  <div style="background:#7ee78722;border:1px solid #34c759;min-height:60px;">C</div>
</div>

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

Ширина родительского элемента составляет 600px. Для дочернего элемента заданы width: 60% и padding: 20px (box-sizing: border-box). Какова ширина области содержимого дочернего элемента?

Итоги

Процентная ширина создаёт гибкие макеты, масштабируемые вместе с родительским контейнером. Сочетайте её с max-width, чтобы содержимое не становилось слишком широким. Используйте aspect-ratio для адаптивных медиаэлементов. Flexbox и Grid обеспечивают более элегантную работу с гибкими столбцами, чем плавающие элементы с процентной шириной.

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

Урок «Гибкая ширина в процентах» бесплатный?

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

Чему я научусь в уроке «Гибкая ширина в процентах»?

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

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

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

Сколько времени занимает урок «Гибкая ширина в процентах»?

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

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

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

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

  1. Подход Mobile-First и Desktop-First
  2. Гибкая ширина в процентах
  3. Шаблоны Min-Width и Max-Width
  4. Адаптивные изображения и элемент Picture
← Назад к CSS Academy