Свойство Flex Basis в Flexbox

Flex Basis

flex-basisСвойство определяет размер самих flex-itemвдоль главной оси гибкого контейнера. Основная ось горизонтальна, если flex-directionустановлено значение, rowи будет вертикальной, если flex-directionсвойство установлено в column.

Синтаксис

flex-basis: auto | content |  | ;

гибкая основа: авто

flex-basis: autoищет основной размер элемента и определяет размер. Например, на горизонтальном гибком контейнере autoбудет искать widthи, heightесли ось контейнера вертикальна.

Если размер не указан, autoвернется к content.

гибкая основа: контент

flex-basis: contentразрешает размер на основе содержимого элемента, если только widthили heightне установлено через normal box-sizing.

В обоих случаях, где flex-basisлибо, autoлибо content, если указан основной размер, этот размер будет иметь приоритет.

гибкая основа:

Это то же самое , что и указание widthили height, но только более гибкое. flex-basis: 20em;установит начальный размер элемента равным 20em. Его окончательный размер будет основан на доступном пространстве, flex-growмножественном или flex-shrinkмножественном.

В спецификации предлагается использовать flexсокращенное свойство. Это помогает писать flex-basisвместе с flex-growи flex-shrinkсвойствами.

Примеры

Вот ряды отдельных гибких контейнеров и отдельных гибких элементов, показывающие, как flex-basisвлияет на box-sizing.

эффект флекс-основы на горизонтальной оси

Когда flex-directionесть column, то же самое flex-basisбудет управлять heightимуществом. Вы можете увидеть это в примере ниже:

пример гибкого базиса управления высотой в вертикальном контейнере

Дополнительная информация:

Вы можете финансировать дополнительные ссылки о свойстве гибкой основы на следующих страницах:

  • Уровень спецификации CSS 1
  • Страница сети разработчиков Mozilla на гибкой основе

Подробнее о Flexbox:

  • Советы и приемы CSS Flexbox
  • Flexbox - полная шпаргалка