Madhësia e elementit flex përgjatë boshtit kryesor

Vetitë width dhe height përcaktojnë gjerësinë dhe lartësinë e elementit flex pavarësisht nga drejtimi i boshteve. Kjo do të thotë, nëse boshti është horizontal, width do të përcaktojë gjerësinë, por nëse boshti është vertikal, width prapë do të përcaktojë gjerësinë. Ndonjëherë kjo sjellje nuk është e përshtatshme.

Në modelin flex ekziston një veti e veçantë flex-basis, e cila përcakton madhësinë e elementit përgjatë boshtit kryesor. Kjo do të thotë se nëse boshti kryesor është horizontal - kjo veti do të përcaktojë gjerësinë e elementeve, dhe nëse është vertikal - do të përcaktojë lartësinë. Kjo veti duhet t'u caktohet vetë elementeve flex, dhe jo prindit të tyre. Le të shohim me shembuj.

Le të themi se boshti kryesor është horizontal, dhe flex-basis ka vlerën 50px. Në këtë rast gjerësia e elementeve do të jetë 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; /* boshti horizontal */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;   /* madhësia e elementit */
	border: 1px solid green;
}

Tani le ta kthejmë boshtin, pa ndryshuar vlerën e vetisë flex-basis. Në këtë rast lartësia e elementeve do të jetë 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; /* boshti vertikal */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Krijoni 5 bllokë flex. Caktoni atyre gjerësinë përgjatë boshtit kryesor në 100px. Shikoni sjelljen e bllokëve përgjatë boshteve të ndryshme.

Nëse boshti është horizontal dhe blloku i ka të caktuar vetinë flex-basis dhe njëkohësisht vetinë width, atëherë flex-basis do të ketë përparësi. Kontrolloni këtë.

Nëse boshti është vertikal dhe blloku i ka të caktuar vetinë flex-basis dhe njëkohësisht vetinë height, atëherë flex-basis do të ketë përparësi. Kontrolloni këtë.