Flex-basis касиети

flex-basis касиети белгилүү flex блогунун башка flex касиеттери колдонулганга чейинки өлчөмүн белгилейт. Жалпысынан, бул касиет элементтин негизги огу боюнча өлчөмүн аныктайт. Бул демек, эгер негизги ок горизонталь болсо - бул касиет элементтердин туурасын белгилейт, ал эми вертикаль болсо - анда бийиктигин.

Белгилүү бир flex блогуна колдонулат.

Бул касиет flex кыскартылган касиетинин курамдаш бөлүгү болуп саналат.

Синтаксис

тандоочу {
	flex-basis: каалаган CSS бирдиктери (жана проценттер) | auto;
}

Демейки мааниси: auto.

Мисал

Ал негизги ок бизде горизонталь жайгашсын, ал эми 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;
}

Мисал

Келгиле эми окту оодарып салалы, касиеттин маанисин өзгөртпөй туруп. Бул учурда элементтердин бийиктиги 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;
}

Ошондой эле караңыз

flex-direction касиети,
бул flex блокторунун окторунун багытын белгилейт
justify-content касиети,
бул негизги ок боюнча тегиздөөнү белгилейт
align-items касиети,
бул кесилишкен ок боюнча тегиздөөнү белгилейт
flex-wrap касиети,
бул flex блокторунун көп саптуулугун белгилейт
flex-flow касиети,
flex-direction жана flex-wrap үчүн кыскартылма
order касиети,
бул flex блокторунун тартибин белгилейт
align-self касиети,
бул бир блогунун тегиздөөсүн белгилейт
flex-grow касиети,
бул flex блокторунун каныккандыгын белгилейт
flex-shrink касиети,
бул flex блокторунун кысылуучулугун белгилейт
flex касиети,
flex-grow, flex-shrink жана flex-basis үчүн кыскартылма