Flex Basis tulajdonság a Flexbox-ban

Flex alap

A flex-basistulajdonság meghatározza flex-itema hajlékony tartály fő tengelyének hosszát . A fő tengely vízszintes, ha a flex-directionértéke be van állítva, rowés függőleges lesz, ha a flex-directiontulajdonság értéke column.

Szintaxis

flex-basis: auto | content |  | ;

flex-based: auto

flex-basis: automegkeresi az elem fő méretét és meghatározza a méretet. Például egy vízszintes rugalmas tartályon meg autofogja keresni, widthés heightha a tartály tengelye függőleges.

Ha nincs meg van szabva, autoesik vissza content.

rugalmas alap: tartalom

flex-basis: contentmegoldja a mérete alapján az elem tartalmának, kivéve, ha widthvagy heightbe van állítva a normális box-sizing.

Mindkét esetben, ahol flex-basisaz egyik van, autovagy contentha a fő méret van megadva, akkor ez a méret élvez elsőbbséget.

rugalmas alap:

Ez ugyanúgy meghatározza, widthvagy heightcsak rugalmasabb. flex-basis: 20em;beállítja az elem kezdeti méretét 20em. Végső mérete a rendelkezésre álló, flex-growtöbbszörös és flex-shrinktöbbszörös helyet fogja alapozni .

A specifikáció flexgyorsírás használatát javasolja . Ez segít flex-basisa tulajdonságok flex-growés a flex-shrinktulajdonságok megírásában .

Példák

Itt vannak az egyes flex-konténerek és az egyes flex-elemek sorai, amelyek megmutatják, hogyan flex-basisbefolyásolja a box-sizing.

a flex-bázis hatása a vízszintes tengelyre

Amikor a flex-directionvan column, ugyanaz flex-basisfogja ellenőrizni az heightingatlant. Az alábbi példában láthatja:

példa a függőleges tartály magasságának szabályozására

Több információ:

A következő oldalakon további referenciákat finanszírozhat a rugalmas alap tulajdonságról:

  • CSS specifikáció 1. szint
  • Mozilla Developer Network oldal rugalmasan

További információ a Flexboxról:

  • CSS Flexbox tippek és trükkök
  • Flexbox - a végső cheatsheet