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 - най-добрата мамят