Dimenzija fleks elementa duž glavne ose

Svojstva width i height zadaju širinu i visinu fleks elementa nezavisno od smera osa. To znači, ako je osa horizontalna, onda će width zadavati širinu, ali ako je osa vertikalna, onda će width i dalje zadavati širinu. Ponekad takvo ponašanje nije praktično.

U fleks modelu postoji specijalno svojstvo flex-basis, koje zadaje dimenziju elementa duž glavne ose. To znači da ako je glavna osa horizontalna - ovo svojstvo će zadavati širinu elemenata, a ako je vertikalna - onda visinu. Ovo svojstvo treba zadati samim flex elementima, a ne njihovom roditelju. Hajde da pogledamo na primerima.

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

Hajde sada da okrenemo osu, ne menjajući vrednost svojstva flex-basis. U ovom slučaju će već 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 je vertikalna */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Napravite 5 fleks-blokova. Zadajte im širinu duž glavne ose od 100px. Posmatrajte ponašanje blokova duž različitih osa.

Ako je osa horizontalna i bloku je zadato svojstvo flex-basis i istovremeno svojstvo width, onda će flex-basis imati prioritet. Proverite ovo.

Ako je osa vertikalna i bloku je zadato svojstvo flex-basis i istovremeno svojstvo height, onda će flex-basis imati prioritet. Proverite ovo.