Velikost flex prvku podél hlavní osy

Vlastnosti width a height nastavují šířku a výšku flex prvku nezávisle na směru os. To znamená, že pokud je osa horizontální, tak width bude nastavovat šířku, ale pokud je osa vertikální, tak width stále bude nastavovat šířku. Někdy takové chování není výhodné.

Ve flex modelu existuje speciální vlastnost flex-basis, která nastavuje velikost prvku podél hlavní osy. To znamená, že pokud je hlavní osa horizontální - tato vlastnost bude nastavovat šířku prvků, a pokud je vertikální - tak výšku. Tuto vlastnost je třeba nastavovat samotným flex prvkům, nikoli jejich rodiči. Podívejme se na příkladech.

Předpokládejme, že hlavní osa je horizontální, a flex-basis má hodnotu 50px. V tomto případě bude šířka prvků 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 horizontální */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;   /* velikost prvku */
	border: 1px solid green;
}

Nyní otočme osu, aniž bychom změnili hodnotu vlastnosti flex-basis. V tomto případě už bude výška prvků 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 vertikální */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Vytvořte 5 flex bloků. Nastavte jim šířku podél hlavní osy na 100px. Sledujte chování bloků podél různých os.

Pokud je osa horizontální a bloku je nastavena vlastnost flex-basis a současně vlastnost width, tak flex-basis bude mít prioritu. Ověřte to.

Pokud je osa vertikální a bloku je nastavena vlastnost flex-basis a současně vlastnost height, tak flex-basis bude mít prioritu. Ověřte to.