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

selektor {
	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:

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

.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:

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

.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

svojstvo flex-direction,
koje postavlja smer osa flex blokova
svojstvo justify-content,
koje određuje poravnanje duž glavne ose
svojstvo align-items,
koje određuje poravnanje duž poprečne ose
svojstvo flex-wrap,
koje određuje višelinijski raspored flex blokova
svojstvo flex-flow,
skraćenica za flex-direction i flex-wrap
svojstvo order,
koje određuje redosled flex blokova
svojstvo align-self,
koje određuje poravnanje jednog bloka
svojstvo flex-grow,
koje određuje "pohlepu" flex blokova
svojstvo flex-shrink,
koje određuje skupljanje flex blokova
svojstvo flex,
skraćenica za flex-grow, flex-shrink i flex-basis