Flexbox CSS

1
2
3
4
5
6
7
8

Coba sendiri

Modul tata letak Flexbox CSS

Sebelum modul tata letak Flexbox (diterbitkan), model tata letak yang tersedia adalah empat jenis berikut:

  • Block (Block), untuk bagian (bagian) di halaman web
  • Inline (Inline), untuk teks
  • Tabel, untuk data tabel dua dimensi
  • Lokasi, untuk posisi yang jelas dari elemen

Modul tata letak bingkai elasti, yang dapat merancang struktur tata letak responsif yang fleksibel dengan mudah, tanpa memerlukan penempatan paralel atau lokasi.

Dukungan peramban

Semua peramban modern mendukung flexbox Atribut.

29.0 11.0 22.0 10 48

Elemen Flexbox

Untuk memulai menggunakan model Flexbox, Anda harus mengdefinikan kontainer Flex terlebih dahulu.

1
2
3

Elemen di atas mewakili kontainer flex yang memiliki tiga project flex (area biru).

Contoh

yang berisi tiga project flex:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Coba sendiri

elemen induk (kontainer)

dengan mengubah display disebutkan sebagai flexdengan properti dapat diubah ukurannya:

1
2
3

Contoh

.flex-container {
  display: flex;
}

Coba sendiri

Berikut adalah properti kontainer flex:

Properti flex-direction

flex-direction Properti menentukan arah di mana kontainer akan menata project flex.

1
2
3

Contoh

column Nilai menata project flex secara vertikal (dari atas ke bawah):

.flex-container {
  display: flex;
  flex-direction: column;
}

Coba sendiri

Contoh

column-reverse Nilai menata project flex secara vertikal (dari bawah ke atas):

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

Coba sendiri

Contoh

row Nilai menata project flex secara horizontal (dari kiri ke kanan):

.flex-container {
  display: flex;
  flex-direction: row;
}

Coba sendiri

Contoh

row-reverse Nilai menata project flex secara horizontal (dari kanan ke kiri):

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

Coba sendiri

Properti flex-wrap

flex-wrap Properti menentukan apakah project flex harus diurutkan atau tidak.

Contoh di bawah ini mengandung 12 project flex untuk menunjukkan properti flex-wrap dengan baik.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Contoh

wrap Nilai menentukan project flex akan diurutkan jika diperlukan:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

Coba sendiri

Contoh

nowrap Nilai menentukan project flex tidak akan diurutkan (baku):

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

Coba sendiri

Contoh

wrap-reverse Nilai menentukan jika project flex harus diurutkan dalam arah yang berlawanan jika diperlukan:

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

Coba sendiri

Properti flex-flow

flex-flow Properti adalah singkatan untuk mengatur properti flex-direction dan flex-wrap sekaligus.

Contoh

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

Coba sendiri

Properti justify-content

justify-content Properti digunakan untuk menarik project flex:

1
2
3

Contoh

center Nilai menarik project flex di tengah kontainer:

.flex-container {
  display: flex;
  justify-content: center;
}

Coba sendiri

Contoh

flex-start Nilai menarik project flex di awal kontainer (baku):

.flex-container {
  display: flex;
  justify-content: flex-start;
}

Coba sendiri

Contoh

flex-end Nilai menarik project flex di ujung akhir kontainer:

.flex-container {
  display: flex;
  justify-content: flex-end;
}

Coba sendiri

Contoh

space-around Nilai menunjukkan project flex sebelum, di antara, dan setelah baris dengan ruang:

.flex-container {
  display: flex;
  justify-content: space-around;
}

Coba sendiri

Contoh

space-between Nilai menunjukkan project flex yang terdapat ruang di antara baris:

.flex-container {
  display: flex;
  justify-content: space-between;
}

Coba sendiri

Properti align-items

align-items Properti digunakan untuk menarik project flex secara vertikal.

1
2
3

Dalam contoh ini, kami menggunakan kontainer dengan tinggi 200 piksel untuk menunjukkan penggunaan properti align-items dengan baik.

Contoh

center Nilai menempatkan item flex di tengah kontainer:

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

Coba sendiri

Contoh

flex-start Nilai menempatkan item flex di atas kontainer:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

Coba sendiri

Contoh

flex-end Nilai menempatkan item elasti di dasar bawah kontainer:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

Coba sendiri

Contoh

stretch Nilai mengepan item flex untuk mengisi kontainer (default):

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}

Coba sendiri

Contoh

baseline Nilai membuat item flex beraturan garis dasar:

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}

Coba sendiri

Perhatian:Pada contoh ini, kita menggunakan ukuran font yang berbeda untuk menunjukkan bahwa item sudah disesuaikan menurut garis dasar teks:

1
2
3
4

Properti align-content

align-content Atribut digunakan untuk menyesuaikan garis elasti.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Dalam contoh ini, kita menggunakan kontainer dengan tinggi 600 pixel dan mengatur atribut flex-wrap menjadi wrap untuk menunjukkan properti align-content dengan cara yang baik.

Contoh

space-between Nilai menampilkan garis elasti dengan jarak yang sama di antaranya:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}

Coba sendiri

Contoh

space-around Nilai menampilkan garis elasti sebelum, di antara, dan setelahnya dengan spasi:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}

Coba sendiri

Contoh

stretch Nilai mengepan garis elasti untuk mengisi ruang sisa (default):

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
}

Coba sendiri

Contoh

center Nilai menampilkan garis elasti di tengah kontainer:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}

Coba sendiri

Contoh

flex-start Nilai menampilkan garis elasti di awal kontainer:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}

Coba sendiri

Contoh

flex-end Nilai menampilkan garis elasti di ujung kontainer:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}

Coba sendiri

Menempatkan di tengah dengan sempurna

Dalam contoh di bawah, kita akan memecahkan masalah gaya yang sangat umum: menempatkan di tengah dengan sempurna.

Solusi: Taruh justify-content dan align-items Setel atribut menjadi tengah, lalu item flex akan menempatkan diri dengan sempurna:

Contoh

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

Coba sendiri

Elemen anak (item)

Elemen anak langsung kontainer flex akan otomatis menjadi item elasti (flex).

1
2
3
4

Elemen di atas mewakili empat item elastic biru di dalam kontainer elastic abu-abu.

Contoh

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div> 
  <div>4</div>
</div>

Coba sendiri

Properti yang digunakan untuk item elastic adalah:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

Properti order

order Properti menentukan urutan item flex.

1
2
3
4

Item flex pertama di kode tidak harus ditampilkan sebagai item pertama di layout.

order Nilainya harus berupa angka, nilai standar adalah 0.

Contoh

order Properti dapat mengubah urutan item flex.

<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>

Coba sendiri

Properti flex-grow

flex-grow Properti menentukan berapa banyak item flex akan bertumbuh terhadap item flex lainnya.

1
2
3

Nilainya harus berupa angka, nilai standar adalah 0.

Contoh

Membuat kecepatan pertumbuhan item ke-3 elastic lebih cepat delapan kali daripada item elastic lain:

<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>

Coba sendiri

Properti flex-shrink

flex-shrink Properti menentukan berapa banyak item flex akan mengecil terhadap item flex lainnya.

1
2
3
4
5
6
7
8
9

Nilainya harus berupa angka, nilai standar adalah 0.

Contoh

Jangan perbolehkan item ke-3 elastic mengecil sejumlah yang sama dengan item elastic lain:

<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>

Coba sendiri

Properti flex-basis

flex-basis Properti menentukan panjang awal item flex.

1
2
3
4

Contoh

Menetapkan panjang awal item ke-3 elastic menjadi 200 piksel:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>

Coba sendiri

Properti flex

flex Properti adalah singkatan dari properti flex-grow, flex-shrink, dan flex-basis.

Contoh

Membuat item ke-3 elastic tidak dapat bertumbuh (0), tidak dapat mengecil (0), dan panjang awalnya adalah 200 piksel:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

Coba sendiri

Properti align-self

align-self Properti menentukan gaya penyejajaran item yang dipilih di dalam kontainer elastic.

align-self Atribut akan menutupi cara pengaturan letak baku yang disetel di align-items kontainer.

1
2
3
4

Dalam contoh-contoh ini, kita menggunakan kontainer tinggi 200 pixel untuk memperlihatkan atribut align-self dengan baik:

Contoh

Jajarkan item ketiga ke tengah kontainer:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

Coba sendiri

Contoh

Jajarkan item kedua di atas kontainer, dan item ketiga di bawah kontainer:

<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>

Coba sendiri

Pustaka gambar responsif menggunakan Flexbox

Buat pustaka gambar responsif menggunakan Flexbox, yang berubah antara empat, dua, atau gambar penuh berdasarkan ukuran layar:

Coba sendiri

Situs web responsif menggunakan Flexbox

Buat situs web responsif menggunakan flexbox, termasuk navigasi elastic dan konten elastic:

Coba sendiri

Atribut CSS Flexbox

Tabel di bawah ini menampilkan atribut CSS yang digunakan bersamaan dengan flexbox:

Atribut Deskripsi
display Tentukan tipe kotak yang digunakan untuk elemen HTML.
flex-direction Tentukan arah item elastic di dalam kontainer elastic.
justify-content Jika item elastic belum menggunakan semua ruang yang tersedia di sumbu utama, sejajarkan item ini secara horizontal.
align-items Jika item elastic belum menggunakan semua ruang yang tersedia di sumbu utama, sejajarkan item ini secara vertikal.
flex-wrap Tentukan apakah item elastic harus dialihkan baris, jika tidak ada ruang yang cukup di garis flex untuk menampung mereka.
align-content Ubah perilaku atribut flex-wrap. Mirip dengan align-items, tetapi tidak mengatur letak item elastic, melainkan mengatur garis flex.
flex-flow Atribut singkat untuk flex-direction dan flex-wrap.
order Tentukan urutan item elastic terhadap item lain di dalam kontainer yang sama.
align-self Digunakan untuk item elastic. Menutupi atribut align-items kontainer.
flex Atribut singkat untuk flex-grow, flex-shrink serta flex-basis.