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

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

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

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

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

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