Svojstvo flex-basis

Svojstvo flex-basis postavlja veličinu konkretnog flex bloka pre primene ostalih flex svojstava. Uopšteno, svojstvo postavlja veličinu elementa duž glavne ose. To znači da će, ako je glavna osa horizontalna - ovo svojstvo određivati širinu elemenata, a ako je vertikalna - onda visinu.

Primenjuje se na konkretan flex blok.

Ovo svojstvo je sastavni deo skraćenog svojstva flex.

Sintaksa

cssselektor {
  flex-basis: bilo koje CSS jedinice (i procenti) | auto;
}

Podrazumevana vrednost: auto.

Primer

Neka je glavna osa horizontalna, a flex-basis ima vrednost 50px. U ovom slučaju, širina elemenata će biti 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; /* osa horizontalna */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px; /* veličina elementa */
  border: 1px solid green;
}

Результат:

Primer

Okrenimo sada osu, bez promene vrednosti svojstva flex-basis. U ovom slučaju će sada visina elemenata biti 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; /* osa vertikalna */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px;
  border: 1px solid green;
}

Результат:

Pogledajte takođe