Свойство на Flex Basis във Flexbox

Flex Основа

В 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е зададено чрез нормално 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собствеността. Можете да го видите в примера по-долу:

пример за управление на височина във флекс база във вертикален контейнер

Повече информация:

Можете да финансирате допълнителни справки за свойството flex base на следните страници:

  • CSS спецификация ниво 1
  • Страница на мрежата за програмисти на Mozilla на гъвкава основа

Повече информация за Flexbox:

  • CSS Flexbox съвети и трикове
  • Flexbox - най-добрата мамят