Die flex-basis Eienskap

Die eienskap flex-basis spesifiseer die grootte van 'n spesifieke flex-blok voordat die ander flex eienskappe daarop toegepas word. In die algemeen spesifiseer die eienskap die grootte van die element langs die hoof-as. Dit beteken dat as die hoof-as horisontaal is - sal hierdie eienskap die breedte van die elemente spesifiseer, en as dit vertikaal is - dan die hoogte.

Word toegepas op 'n spesifieke flex blok.

Hierdie eienskap is 'n samestellende deel van die kortskrif-eienskap flex.

Sintaksis

cssselektor {
  flex-basis: enige CSS eenhede (en persentasies) | auto;
}

Verstekwaarde: auto.

Voorbeeld

Kom ons neem aan die hoof-as is horisontaal, en flex-basis het die waarde 50px. In hierdie geval sal die breedte van die elemente 50px wees:

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; /* as is horisontaal */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px; /* grootte van element */
  border: 1px solid green;
}

Результат:

Voorbeeld

Kom ons draai nou die as om, sonder om die waarde van die eienskap flex-basis te verander. In hierdie geval sal die hoogte van die elemente 50px wees:

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; /* as is vertikaal */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px;
  border: 1px solid green;
}

Результат:

Sien ook