Flex xassəsi

flex xassəsi flex-basis, flex-shrink və flex-grow üçün qısaldılmış yazılışdır.

Tətbiq edildiyi: konkret flex blokuna.

Dəyərlərin sırasının əhəmiyyəti yoxdur. Ikinci və üçüncü parametrlər (flex-shrink, flex-basis) məcburi deyil.

Dəyərlər

Uyğun xassələrə baxın.

Standart dəyər: 0 1 auto.

Nümunə

Tutaq ki, bizim 3 elementimiz var. Hər birinin eni 200px təşkil edir və ümumi olaraq 600px-yə bərabərdir, bu da valideyn konteynerinin enindən çoxdur, hansı ki, 300px-yə bərabərdir. Gəlin birinci element üçün eni 200px, ikinci element üçün - 300px, üçüncü element üçün isə - 100px təyin edək. Bütün elementlərin flex-basis dəyəri 1, flex-shrink dəyəri isə elementin sıra nömrəsinə uyğun olaraq 1, 2, 3 olsun:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem2">3</div>
</div>

.parent {
	display: flex;
	width: 350px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 200px;
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	flex: 200px 1 1;
}
.elem2 {
	flex: 300px 1 2;
}
.elem3 {
	flex: 100px 1 3;
}

Həmçinin bax

flex-direction xassəsi,
flex bloklarının oxlarının istiqamətini təyin edir
justify-content xassəsi,
əsas ox üzrə düzləndirməni təyin edir
align-items xassəsi,
kəsişən ox üzrə düzləndirməni təyin edir
flex-wrap xassəsi,
flex bloklarının çoxsətirliyini təyin edir
flex-flow xassəsi,
flex-direction və flex-wrap üçün qısaldılmış yazılış
order xassəsi,
flex bloklarının sırasını təyin edir
align-self xassəsi,
tək bir blokun düzləndirilməsini təyin edir
flex-basis xassəsi,
konkret flex blokunun ölçüsünü təyin edir
flex-grow xassəsi,
flex bloklarının böyümə əmsalını təyin edir
flex-shrink xassəsi,
flex bloklarının kiçilmə əmsalını təyin edir