Ominaisuus flex-basis

Ominaisuus flex-basis asettaa tietyn flex-elementin koon ennen kuin muut flex-ominaisuudet sovelletaan siihen. Yleisesti ottaen ominaisuus asettaa elementin koon pääakselin suunnassa. Tämä tarkoittaa, että jos pääakseli on vaakasuora - tämä ominaisuus asettaa elementtien leveyden, ja jos pystysuora - niin korkeuden.

Sovelletaan tiettyyn flex-elementtiin.

Tämä ominaisuus on osa lyhennysominaisuutta flex.

Syntaksi

cssvalitsija {
  flex-basis: mitkä tahansa CSS-yksiköt (ja prosentit) | auto;
}

Oletusarvo: auto.

Esimerkki

Oletetaan, että pääakselimme on vaakasuora, ja flex-basis-ominaisuuden arvo on 50px. Tässä tapauksessa elementtien leveys on 50px:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

css.parent  {
  display: flex;
  flex-direction: row; /* akseli vaakasuora */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px; /* elementin koko */
  border: 1px solid green;
}

Результат:

Esimerkki

Käännämme nyt akselin, muuttamatta ominaisuuden flex-basis arvoa. Tässä tapauksessa elementtien korkeus on 50px:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

css.parent {
  display: flex;
  flex-direction: column; /* akseli pystysuora */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px;
  border: 1px solid green;
}

Результат:

Katso myös