Item Fleksibel CSS
Elemen Anak (Item)
Elemen turunan langsung dari wadah fleksibel secara otomatis menjadi item fleksibel (fleksibel).
1
2
3
4
Elemen di atas mewakili empat item fleksibel biru di dalam wadah fleksibel abu-abu.
Contoh
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Properti item fleksibel adalah:
Properti pesanan
Properti ordermenentukan urutan item fleksibel.
1
2
3
4
Item fleksibel pertama dalam kode tidak harus muncul sebagai item pertama dalam tata letak.
Nilai pesanan harus berupa angka, nilai default adalah 0.
Contoh
Properti order dapat mengubah urutan item fleksibel:
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
Properti flex-grow
Properti flex-growmenentukan seberapa banyak item fleksibel akan tumbuh relatif terhadap item fleksibel lainnya.
1
2
3
Nilai harus berupa angka, nilai default adalah 0.
Contoh
Buat item fleksibel ketiga tumbuh delapan kali lebih cepat daripada item fleksibel lainnya:
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow:
8">3</div>
</div>
Properti flex-shrink
Properti flex-shrinkmenentukan seberapa banyak item fleksibel akan menyusut relatif terhadap item fleksibel lainnya.
1
2
3
4
5
6
7
8
9
10
Nilai harus berupa angka, nilai default adalah 1.
Contoh
Jangan biarkan item fleksibel ketiga menyusut sebanyak item fleksibel lainnya:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink:
0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
Properti flex-basis
Properti flex-basismenentukan panjang awal item fleksibel.
1
2
3
4
Contoh
Atur panjang awal item fleksibel ketiga menjadi 200 piksel:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>
Properti fleksibel
Properti flexadalah properti singkatan untuk
flex-grow, flex-shrink, dan flex-basisproperti.
Contoh
Jadikan item fleksibel ketiga tidak dapat ditumbuhkan (0), tidak dapat diciutkan (0), dan dengan panjang awal 200 piksel:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex:
0 0 200px">3</div>
<div>4</div>
</div>
Properti align-self
Properti align-selfmenentukan perataan untuk item yang dipilih di dalam wadah fleksibel.
Properti align-self menimpa perataan default yang ditetapkan oleh properti penampung align-items.
1
2
3
4
Dalam contoh ini, kami menggunakan wadah setinggi 200 piksel, untuk mendemonstrasikan
align-selfproperti dengan lebih baik:
Contoh
Sejajarkan item fleksibel ketiga di tengah wadah:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self:
center">3</div>
<div>4</div>
</div>
Contoh
Sejajarkan item fleksibel kedua di bagian atas wadah, dan item fleksibel ketiga di bagian bawah wadah:
<div class="flex-container">
<div>1</div>
<div style="align-self:
flex-start">2</div>
<div style="align-self:
flex-end">3</div>
<div>4</div>
</div>
Properti Item Flexbox CSS
Tabel berikut mencantumkan semua properti Item Flexbox CSS:
| Property | Description |
|---|---|
| align-self | Specifies the alignment for a flex item (overrides the flex container's align-items property) |
| flex | A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties |
| flex-basis | Specifies the initial length of a flex item |
| flex-grow | Specifies how much a flex item will grow relative to the rest of the flex items inside the same container |
| flex-shrink | Specifies how much a flex item will shrink relative to the rest of the flex items inside the same container |
| order | Specifies the order of the flex items inside the same container |