Flekselemendi suurus põhitelje suunas

Omadused width ja height määravad flekselemendi laiuse ja kõrguse sõltumata telgede suunast. See tähendab, et kui telg on horisontaalne, siis width määrab laiuse, kuid kui telg on vertikaalne, siis width määrab endiselt laiuse. Mõnikord pole selline käitumine mugav.

Fleksmudelis on spetsiaalne omadus flex-basis, mis määrab elemendi suuruse põhitelje suunas. See tähendab, et kui põhitelg on horisontaalne - see omadus määrab elementide laiuse, ja kui vertikaalne - siis kõrguse. See omadus tuleb määrata flekselementidele endile, mitte nende vanemale. Vaatame näidetel.

Oletame, et põhitelg on praegu horisontaalne, ja flex-basis väärtus on 50px. Sellisel juhul on elementide laius 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; /* telg horisontaalne */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;   /* elemendi suurus */
	border: 1px solid green;
}

Pöörame nüüd telje, muutmata omaduse flex-basis väärtust. Sel juhul on elementide kõrgus 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; /* telg vertikaalne */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Tehke 5 fleksplokki. Määrake neile laius põhitelje suunas 100px. Vaadake plokkide käitumist erinevate telgede suundades.

Kui telg on horisontaalne ja plokile on määratud omadus flex-basis ja samal ajal omadus width, siis on flex-basis-l eeliseisund. Kontrollige seda.

Kui telg on vertikaalne ja plokile on määratud omadus flex-basis ja samal ajal omadus height, siis on flex-basis-l eeliseisund. Kontrollige seda.