Kontainer Fleksibel CSS
Elemen Induk (Wadah)
Seperti yang kami tentukan di bab sebelumnya, ini adalah wadah fleksibel (area biru) dengan tiga item fleksibel :
1
2
3
Wadah fleksibel menjadi fleksibel dengan mengatur displayproperti ke
flex:
Contoh
.flex-container {
display: flex;
}
Properti wadah fleksibel adalah:
Properti flex-direction
Properti flex-directionmenentukan ke arah mana wadah ingin menumpuk item fleksibel.
1
2
3
Contoh
Nilai columnmenumpuk item fleksibel secara vertikal (dari atas ke bawah):
.flex-container {
display: flex;
flex-direction: column;
}
Contoh
Nilai column-reversemenumpuk item fleksibel secara vertikal (tetapi dari bawah ke atas):
.flex-container {
display: flex;
flex-direction: column-reverse;
}
Contoh
Nilai rowmenumpuk item fleksibel secara horizontal (dari kiri ke kanan):
.flex-container {
display: flex;
flex-direction: row;
}
Contoh
Nilai row-reversemenumpuk item fleksibel secara horizontal (tetapi dari kanan ke kiri):
.flex-container {
display: flex;
flex-direction: row-reverse;
}
Properti bungkus fleksibel
Properti flex-wrapmenentukan apakah item fleksibel harus dibungkus atau tidak.
Contoh di bawah ini memiliki 12 item fleksibel, untuk mendemonstrasikan
flex-wrapproperti dengan lebih baik.
1
2
3
4
5
6
7
8
9
10
11
12
Contoh
Nilai wrapmenentukan bahwa item fleksibel akan dibungkus jika perlu:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Contoh
Nilai nowrapmenentukan bahwa item fleksibel tidak akan dibungkus (ini default):
.flex-container {
display: flex;
flex-wrap: nowrap;
}
Contoh
Nilai wrap-reversemenentukan bahwa item fleksibel akan dibungkus jika perlu, dalam urutan terbalik:
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
Properti aliran fleksibel
Properti flex-flowadalah properti singkatan untuk mengatur keduanya
flex-directiondan
flex-wrapproperti.
Contoh
.flex-container {
display: flex;
flex-flow: row wrap;
}
Properti konten justify
Properti justify-contentini digunakan untuk menyelaraskan item fleksibel:
1
2
3
Contoh
Nilai centermenyelaraskan item fleksibel di tengah wadah:
.flex-container {
display: flex;
justify-content: center;
}
Contoh
Nilai flex-startmenyelaraskan item fleksibel di awal wadah (ini default):
.flex-container {
display: flex;
justify-content: flex-start;
}
Contoh
Nilai flex-endmenyelaraskan item fleksibel di akhir wadah:
.flex-container {
display: flex;
justify-content: flex-end;
}
Contoh
Nilai space-aroundmenampilkan item fleksibel dengan spasi sebelum, di antara, dan setelah baris:
.flex-container {
display: flex;
justify-content: space-around;
}
Contoh
Nilai space-betweenmenampilkan item fleksibel dengan spasi di antara baris:
.flex-container {
display: flex;
justify-content: space-between;
}
Properti align-item
Properti align-itemsini digunakan untuk menyelaraskan item fleksibel.
1
2
3
Dalam contoh ini, kami menggunakan wadah setinggi 200 piksel, untuk mendemonstrasikan
align-itemsproperti dengan lebih baik.
Contoh
Nilai centermenyelaraskan item fleksibel di tengah wadah:
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
Contoh
Nilai flex-startmenyelaraskan item fleksibel di bagian atas wadah:
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
Contoh
Nilai flex-endmenyelaraskan item fleksibel di bagian bawah wadah:
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
Contoh
Nilai stretchmeregangkan item fleksibel untuk mengisi wadah (ini default):
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
Contoh
Nilai baselinemenyelaraskan item fleksibel seperti garis dasarnya:
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
Catatan: contoh menggunakan ukuran font yang berbeda untuk menunjukkan bahwa item disejajarkan dengan garis dasar teks:
1
2
3
Properti align-konten
Properti align-contentini digunakan untuk menyelaraskan garis fleksibel.
1
2
3
4
5
6
7
8
9
10
11
12
Dalam contoh ini, kami menggunakan wadah setinggi 600 piksel, dengan
flex-wrapproperti disetel ke wrap, untuk mendemonstrasikan align-contentproperti dengan lebih baik.
Contoh
Nilai space-betweenmenampilkan garis fleksibel dengan ruang yang sama di antara mereka:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
Contoh
Nilai space-aroundmenampilkan garis fleksibel dengan spasi sebelum, di antara, dan setelahnya:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
Contoh
Nilai stretchmeregangkan garis fleksibel untuk mengambil ruang yang tersisa (ini default):
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
Contoh
Tampilan centernilai menampilkan garis fleksibel di tengah wadah:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
Contoh
Nilai flex-startmenampilkan garis fleksibel di awal wadah:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
Contoh
Nilai flex-endmenampilkan garis fleksibel di akhir wadah:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
Pemusatan Sempurna
Dalam contoh berikut kita akan memecahkan masalah gaya yang sangat umum: pemusatan sempurna.
SOLUSI: Setel properti justify-contentdan align-itemske
center, dan item fleksibel akan berada di tengah sempurna:
Contoh
.flex-container {
display: flex;
height: 300px;
justify-content:
center;
align-items: center;
}
Properti Kontainer Flexbox CSS
Tabel berikut mencantumkan semua properti CSS Flexbox Container:
| Property | Description |
|---|---|
| align-content | Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines |
| align-items | Vertically aligns the flex items when the items do not use all available space on the cross-axis |
| display | Specifies the type of box used for an HTML element |
| flex-direction | Specifies the direction of the flexible items inside a flex container |
| flex-flow | A shorthand property for flex-direction and flex-wrap |
| flex-wrap | Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line |
| justify-content | Horizontally aligns the flex items when the items do not use all available space on the main-axis |