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

Флекс-элементы и блочная модель

В предыдущей части про флексбокс мы знакомились с базовыми понятиями этого механизма раскладки и подробно изучали, как работает выравнивание флекс-элементов. Ну, а эта часть будет посвящена управлению размерами флекс-элементов.

Начнём с простого вопроса. Как работает привычная нам блочная модель внутри флекс-контейнера? Есть ли какие-нибудь отличия в поведении привычных свойств?

Ширина, высота, внутренние отступы и рамки для флекс-контейнеров и флекс-элементов работают как обычно: общий размер элементов складывается из этих компонентов. Это поведение также можно менять с помощью свойства box-sizing.

Есть и несколько важных отличий:

  • флекс-элементы, в отличие от блочных элементов, не растягиваются на всю ширину контейнера по умолчанию;
  • на флекс-элементы не действует свойство float.

Теперь поработаем с уже знакомыми свойствами и убедимся, что они работают привычным нам образом.

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

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

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

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

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

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