• Теория
  • Теория

Свойство width, ширина элемента

Мы изменили тип у <main>, и его содержимое автоматически выстроилось в две колонки. Но сейчас они выглядят неаккуратно, а их размеры не соответствуют макету. Разберём, как это исправить.

По умолчанию флекс-элементы не переносятся на новую строку и ужимаются до содержимого. Поэтому раздел с фотографией сжался ровно до ширины картинки. Другой же раздел занял всё оставшееся пространство из-за текста. Текст, даже во флекс-элементе, старается занять столько места по ширине, сколько может.

Из-за этих особенностей сеточным флекс-элементам лучше всегда явно прописывать ширину. Для этого проще всего использовать свойство width:

width: 550px;

По умолчанию свойство width задаёт ширину содержимого бокса (content) и не учитывает внутренние отступы и ширину рамки.

Схема бокса

Рассмотрим пример:

.box {
  width: 100px;
  padding-left: 20px;
  padding-right: 30px;
  border: 5px solid black;
}

В этом случае полная ширина бокса окажется 160px, потому что ширина содержимого сложится с шириной отступов и рамок: 100px + 20px + 30px + 5px + 5px (рамка справа и слева).

Это поведение width можно изменить. О том, как это сделать, мы поговорим в одной из следующих частей.

Чтобы содержимое колонок не прилипало к краям боксов, следует добавить им внутренние отступы. Свойство padding работает для флекс-элементов так же, как для блочных боксов.

Макет основного содержимого

Зададим колонкам (разделу с классом bio и разделу с классом photo) фиксированную ширину и внутренние отступы.

Высоту бокса можно задать с помощью свойства height. Но обычно для сеточных элементов её не указывают.

Другой способ задать размеры флекс-элементу — использовать свойство flex-basis. О нём подробно рассказано в этом задании.

Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 27 мая по 29 июля 2024. Цена 22 900 ₽

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Сетки» тренажёра «Базовые механики построения сеток» можно после регистрации и оформления подписки.