Sifat flex
Sifat flex adalah singkatan untuk flex-basis,
flex-shrink
dan flex-grow.
Digunakan untuk: blok flex tertentu.
Urutan nilai tidak penting. Parameter kedua dan ketiga
(flex-shrink, flex-basis)
tidak wajib.
Nilai
Lihat sifat yang berkaitan.
Nilai lalai: 0 1 auto.
Contoh
Katakan kita ada 3 elemen. Lebar setiap satu daripadanya
ialah 200px dan jumlahnya sama dengan 600px,
yang lebih besar daripada lebar bekas induk, yang
sama dengan 300px. Mari kita tetapkan untuk elemen pertama lebar
200px, untuk elemen kedua - 300px, untuk
elemen ketiga - 100px. Untuk semua elemen
biarkan nilai flex-basis sama dengan 1,
dan flex-shrink - 1, 2, 3 mengikut
nombor urutan elemen:
<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;
}
:
Lihat juga
-
sifat
flex-direction,
yang menetapkan arah paksi blok flex -
sifat
justify-content,
yang menetapkan penjajaran sepanjang paksi utama -
sifat
align-items,
yang menetapkan penjajaran sepanjang paksi silang -
sifat
flex-wrap,
yang menentukan kebolehan pelbagai baris blok flex -
sifat
flex-flow,
singkatan untuk flex-direction dan flex-wrap -
sifat
order,
yang menetapkan susunan blok flex -
sifat
align-self,
yang menetapkan penjajaran satu blok -
sifat
flex-basis,
yang menetapkan saiz blok flex tertentu -
sifat
flex-grow,
yang menetapkan ketamakan blok flex -
sifat
flex-shrink,
yang menetapkan kebolehan mengecut blok flex