flex-basis häsiýeti

flex-basis häsiýeti konkrekt bir flex blogunyň ölçegini, beýleki flex häsiýetleri şoňa ýetirilmezden öň kesgitleýär. Umuman, häsiýet esasy oka görä elementleriň ölçegini kesgitleýär. Bu şuny aňladýar: eger esasy oky gorizontal bolsa - bu häsiýet elementleriň ini, eger dikeý bolsa - bolsa beýikligini kesgitleýär.

Konkrekt bir flex blogyna degişlidir.

Bu häsiýet flex gysga häsiýetiň düzüm bölegidir.

Sintaksis

selektor {
	flex-basis: islendik CSS birlikleri (we göterimler) | auto;
}

Bellenen gymmat: auto.

Mysal

Esasy okyň gorizontal ýerleşen, we flex-basis häsiýetiniň gymmaty 50px bolýandygy bolsun. Şonda elementleriň ini 50px bolar:

<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; /* oky gorizontal */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px; /* elementiň ölçegi */
	border: 1px solid green;
}

Mysal

Geliň indi oky agdaryp, flex-basis häsiýetiniň gymmatyny üýtgetmezden. Şonda elementleriň beýikligi 50px bolar:

<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; /* oky dikeý */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Şeýle hem serediň

flex bloklaryň ok ýönüni kesgitleýän flex-direction häsiýeti,
esasy oka görä deňleşdirmäni kesgitleýän justify-content häsiýeti,
çatysma oka görä deňleşdirmäni kesgitleýän align-items häsiýeti,
flex bloklaryň köp setirliligini kesgitleýän flex-wrap häsiýeti,
flex-direction we flex-wrap üçin gysga görnüş bolan flex-flow häsiýeti,
flex bloklaryň tertibini kesgitleýän order häsiýeti,
bir blogyň deňleşdirilmesini kesgitleýän align-self häsiýeti,
flex bloklaryň gopgunlygyny kesgitleýän flex-grow häsiýeti,
flex bloklaryň ýygnawlygyny kesgitleýän flex-shrink häsiýeti,
flex-grow, flex-shrink we flex-basis üçin gysga görnüş bolan flex häsiýeti,