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-directionxassəsi,
flex bloklarının oxlarının istiqamətini təyin edir -
justify-contentxassəsi,
əsas ox üzrə düzləndirməni təyin edir -
align-itemsxassəsi,
kəsişən ox üzrə düzləndirməni təyin edir -
flex-wrapxassəsi,
flex bloklarının çoxsətirliyini təyin edir -
flex-flowxassəsi,
flex-direction və flex-wrap üçün qısaldılmış yazılış -
orderxassəsi,
flex bloklarının sırasını təyin edir -
align-selfxassəsi,
tək bir blokun düzləndirilməsini təyin edir -
flex-basisxassəsi,
konkret flex blokunun ölçüsünü təyin edir -
flex-growxassəsi,
flex bloklarının böyümə əmsalını təyin edir -
flex-shrinkxassəsi,
flex bloklarının kiçilmə əmsalını təyin edir