Основа Флек основе у Флекбок-у

Флек Басис

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

пример управљања висином у флексибилној основи у вертикалном контејнеру

Више информација:

Додатне референце о својству флек основа можете финансирати на следећим страницама:

  • ЦСС ниво спецификације 1
  • Страница Мозилла Девелопер Нетворк на флексибилној основи

Више информација о Флекбоку:

  • ЦСС Флекбок савети и трикови
  • Флекбок - врхунска варалица