De eigenschap flex-basis

De eigenschap flex-basis bepaalt de grootte van een specifiek flexblok voordat de overige flex-eigenschappen erop worden toegepast. In het algemeen bepaalt de eigenschap de grootte van het element langs de hoofdas. Dit betekent dat als de hoofdas horizontaal is - deze eigenschap de breedte van de elementen bepaalt, en als deze verticaal is - dan de hoogte.

Wordt toegepast op een specifiek flexblok.

Deze eigenschap maakt deel uit van de verkorte eigenschap flex.

Syntaxis

cssselector {
  flex-basis: alle CSS-eenheden (en percentages) | auto;
}

Standaardwaarde: auto.

Voorbeeld

Stel dat de hoofdas horizontaal is gericht, en flex-basis de waarde 50px heeft. In dit geval zal de breedte van de elementen 50px zijn:

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

Результат:

Voorbeeld

Laten we nu de as omdraaien, zonder de waarde van de eigenschap flex-basis te veranderen. In dit geval zal de hoogte van de elementen 50px zijn:

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

Результат:

Zie ook