CSS гибкая компоновка блоков

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

Гибкая компоновка блоков в действии

В следующем примере контейнер был задан как display: flex, что означает, что три дочерних элемента становятся элементами гибкой компоновки. Значение justify-content было установлено в space-between для равномерного размещения элементов по главной оси. Между каждым элементом размещается одинаковое количество места, при этом левый и правый элементы выровнены с краями контейнера с гибкой компоновкой. Вы также можете заметить, что элементы растягиваются по поперечной оси, из-за значения по умолчанию align-items равного stretch. Элементы растягиваются до высоты контейнера с гибкой компоновкой, что делает каждый из них таким же высоким, как самый высокий элемент.

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three <br />has <br />extra <br />text</div>
</div>

body {
  font-family: sans-serif;
}

.box {
  border: 2px dotted rgb(96 139 168);
  display: flex;
  justify-content: space-between;
}

.box > * {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  padding: 1em;
}

Справочник

Свойства

Термины глоссария

Руководства

Основные понятия Flexbox: Обзор возможностей Flexbox.
Связь Flexbox с другими методами компоновки: Как Flexbox относится к другим методам компоновки и другим спецификациям CSS.
Выравнивание элементов в контейнере с гибкой компоновкой: Как свойства выравнивания блоков работают с Flexbox.
Порядок элементов гибкой компоновки: Объяснение различных способов изменения порядка и направления элементов, а также потенциальные проблемы, связанные с этим.
Управление пропорциями элементов гибкой компоновки вдоль главной оси: Объяснение свойств flex-grow, flex-shrink и flex-basis.
Овладение обёртыванием элементов гибкой компоновки: Как создавать контейнеры с гибкой компоновкой с несколькими строками и контролировать отображение элементов в этих строках.
Типичные варианты использования Flexbox: Общие шаблоны проектирования, которые являются типичными вариантами использования Flexbox.
CSS компоновка: flexbox: Изучите, как использовать flexbox для создания веб-макетов.
Выравнивание блоков в flexbox: Подробные сведения о функциях CSS выравнивания блоков, которые специфичны для flexbox.

Связанные понятия

Модуль CSS display

Модуль CSS выравнивания блоков

Модуль CSS размеров блоков

aspect-ratio
max-content значение
min-content значение
fit-content значение
внутренний размер термин глоссария

Спецификации

Спецификация
CSS Модуль гибкой компоновки блоков уровень 1

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout