Flex Basis-ejendom i Flexbox

Flex basis

Den flex-basisegenskab definerer størrelsen af det flex-itemlangs hovedaksen af det fleksible beholder. Hovedaksen er vandret, hvis den flex-directioner indstillet til, rowog den vil være lodret, hvis flex-directionejendommen er indstillet til column.

Syntaks

flex-basis: auto | content |  | ;

flex-basis: auto

flex-basis: autoslår elementets hovedstørrelse op og definerer størrelsen. For eksempel på en vandret flexcontainer, autovil se efter, widthog heighthvis containeraksen er lodret.

Hvis der ikke er angivet nogen størrelse, autofalder den tilbage til content.

flex-basis: indhold

flex-basis: contentløser størrelsen baseret på elementets indhold, medmindre widtheller heighter indstillet til normal box-sizing.

I begge tilfælde hvor flex-basisenten er, autoeller contenthvis hovedstørrelse er specificeret, vil størrelsen have prioritet.

flex-basis:

Dette er lige som at specificere widtheller height, men kun mere fleksibelt. flex-basis: 20em;indstiller elementets indledende størrelse til 20em. Dens endelige størrelse vil være baseret på ledig plads, flex-growflere og flex-shrinkflere.

Specifikationen antyder brug af flexstenografisk ejendom. Dette hjælper med at skrive flex-basissammen med flex-growog flex-shrinkegenskaber.

Eksempler

Her er rækker af individuelle flexcontainere og individuelle flexelementer, der viser, hvordan det flex-basispåvirker box-sizing.

effekt af flex-basis på vandret akse

Når det flex-directioner column, vil det samme flex-basiskontrollere heightejendommen. Du kan se det i eksemplet nedenfor:

eksempel på flex-basis kontrol af højden i en lodret beholder

Mere information:

Du kan finansiere yderligere referencer om egenskaben flex basis på de følgende sider:

  • CSS-specifikationsniveau 1
  • Mozilla Developer Network-side på flex-basis

Mere info om Flexbox:

  • CSS Flexbox tip og tricks
  • Flexbox - det ultimative cheatsheet