Андозаи унсури флекс дар тири оси асосӣ

Хосиятҳои width ва height паҳноӣ ва баландии унсури флексро мустақил аз самои равиши меъёрҳо муайян мекунанд. Яъне, агар меъёр уфуқӣ бошад, width паҳноӣ муайян мекунад, аммо агар меъёр амудӣ бошад, width ҳамчунон паҳноӣ муайян мекунад. Баъзан ин рафтор мувофиқ нест.

Дар модели флекс хосияти махсус flex-basis мавҷуд аст, ки андозаи унсурро дар тири оси асосӣ муайян мекунад. Ин маънои онро дорад, ки агар оси асосӣ уфуқӣ бошад - ин хосият паҳноии унсурҳоро муайян мекунад, ва агар амудӣ бошад - баландиро. Ин хосиятро бояд ба худи унсурҳои флекс дода шавад, на ба волидайни онҳо. Биёед бар рӯйи мисолҳо назар андозем.

Фарз мекунем акнун оси асосӣ уфуқӣ аст, ва flex-basis арзиши 50px дорад. Дар ин ҳолат паҳноии унсурҳо 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; /* меъёр уфуқӣ аст */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;   /* андозаи унсур */
	border: 1px solid green;
}

Акнун биёед меъёрро гардонем, бидуни тағйир додани арзиши хосияти flex-basis. Дар ин ҳолат дигар баландии унсурҳо 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; /* меъёр амудӣ аст */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

5 блоки флексӣ созед. Ба онҳо паҳноӣ дар тири оси асосӣ ба 100px муайян кунед. Ба рафтори блокҳо дар тири меъёрҳои гуногун назар андозед.

Агар меъёр уфуқӣ бошад ва ба блок хосияти flex-basis ва ҳамзамон хосияти width дода шавад, пас flex-basis арзиши аввалро хоҳад дошт. Инро санҷед.

Агар меъёр амудӣ бошад ва ба блок хосияти flex-basis ва ҳамзамон хосияти height дода шавад, пас flex-basis арзиши аввалро хоҳад дошт. Инро санҷед.