Tutorial CSS / Dasar Flexbox: Kontainer, Item, dan Sumbu

Flexbox menyusun item anak langsung kontainer sepanjang sumbu utama dan mendistribusikan ruang sepanjang sumbu tersebut. flex-direction memilih arah sumbu utama, sedangkan sumbu silang berjalan tegak lurus terhadapnya; baris tidak selalu identik dengan horizontal.

Pilih kontainer Flexbox dan itemnya

Flexbox cocok untuk hubungan satu dimensi seperti item navigasi, bidang pencarian di samping tombol, atau ikon di samping deskripsi. Menyusun ini dengan spasi berulang atau elemen yang diposisikan secara independen rentan saat konten dan lebar yang tersedia berubah. Flexbox mendistribusikan ruang yang tersedia di dalam sebuah wadah di antara anak-anak langsungnya.

Jika Anda membutuhkan grid yang secara konsisten menyelaraskan baris dan kolom secara bersamaan, tinjau Grid. Flexbox juga dapat dibagi menjadi beberapa baris, tetapi setiap baris mendistribusikan ruang secara terpisah, sehingga kolom di baris pertama tidak selalu sesuai dengan kolom di baris kedua. Area besar dari halaman dapat digunakan bersama sebagai Grid, dan sekumpulan tombol di dalamnya dapat digunakan bersama seperti Flexbox. Untuk menyelaraskan beberapa baris dan kolom bersama-sama, bandingkan Dasar CSS Grid: Track, Garis, dan Penempatan Item yang membuat baris dan kolom secara bersamaan.

.menu {
  display: flex;
  gap: 12px;
}

Deklarasi ini bukan perintah untuk menata .menu itu sendiri di dalam induknya. Ini adalah perintah untuk menata anak-anak langsung di .menu. Misalnya, jika Anda memiliki dua div di dalam sebuah .menu dan dua span di dalam div pertama, item Flex adalah dua div. Jika Anda ingin menata span secara horizontal, Anda juga harus menentukan display: flex yang terpisah di div itu.

Identifikasi sumbu utama dan sumbu silang

Sumbu utama adalah arah di mana item Flex dicantumkan, dan sumbu silang adalah arah yang tegak lurus terhadap sumbu utama. Alih-alih menghafal properti mana yang mengontrol lebar atau tinggi, Anda perlu memahami sumbu mana yang mengendalikannya sehingga Anda dapat menatanya dengan tepat bahkan ketika Anda mengubahnya menjadi kolom.

Arah dalam tabel ini mengasumsikan writing-mode: horizontal-tb dan direction: ltr. Dalam tulisan dari kanan ke kiri atau vertikal, arah fisiknya berubah. row mengikuti arah inline sehingga tidak selalu dimulai dari kiri. Untuk penjelasan sumbu dan arah penulisan, lihat konsep dasar Flexbox di MDN.

Pahami perilaku awal Flexbox

Jika nilai terpisah tidak ditentukan, arahnya row dan flex-wrap bernilai nowrap. Item dikelompokkan di awal sumbu utama dan tidak otomatis meluas sepanjang sumbu utama untuk mengisi ruang ekstra. Item dapat menyusut jika ruang tidak cukup, tetapi jika tidak dapat menyusut cukup karena ukuran minimum konten atau batas yang ditentukan, item dapat meluap ke luar induk. Kontrol terperinci terhadap penyelarasan, pemisah baris, dan ukuran item akan dilanjutkan dalam Penyelarasan Flexbox, Pembungkusan, gap, grow, dan shrink.

Pada sumbu silang, perilaku penyelarasan awal adalah stretch (meregang). Item dengan tinggi otomatis dalam satu baris biasanya mengisi tinggi baris yang sama. Inilah mengapa kartu deskripsi pendek terlihat setinggi kartu deskripsi panjang. Jangan mengasumsikan bahwa item yang sudah memiliki tinggi yang jelas atau margin otomatis akan otomatis meregang. Dalam kolom, sumbu silang adalah horizontal, sehingga lebar tampak meningkat.

Pengubahan ukuran awal dari suatu item dapat dipahami sebagai flex: 0 1 auto. 0 berarti tidak diperbesar dengan mengambil sisa ruang, 1 berarti ikut serta dalam pengurangan saat ruang tidak cukup, dan auto berarti menggunakan spesifikasi ukuran dan konten dari sumbu utama yang bersangkutan sebagai dasar. Pada tahap ini, arah penempatan dan operasi dasar pertama-tama diperiksa, dan praktik penyesuaian rasio dan pemecahan baris dibahas secara rinci dalam pelajaran penyelarasan dan penyesuaian ukuran.

Bandingkan aliran normal dan arah Flexbox

Simpan kode di bawah ini sebagai file UTF-8 flex-direction.html dan buka di browser Anda. Tidak diperlukan pustaka terpisah. Semua tautan ditulis dalam urutan pertama, kedua, ketiga, dan hanya CSS yang berbeda. Bagian tata letak umum menentukan tautan sebagai blok dan menampilkannya baris demi baris.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>flex-direction.html</title>
  <style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
.demo { border: 2px dashed #789; padding: 12px; margin-bottom: 20px; }
 .demo > a, .nested > div { padding: 12px; background: #dceefa; }
 .normal > a { display: block; margin-bottom: 8px; }
 .row, .column, .reverse, .nested { display: flex; gap: 12px; }
 .column { flex-direction: column; }
 .reverse { flex-direction: row-reverse; }
 .nested > div { flex: 1; min-width: 0; }
 .nested span { display: block; }
 .initial { display: flex; gap: 12px; border: 2px dashed #789; }
 .initial > div { width: 180px; min-width: 0; padding: 12px; background: #e8f5de; }
  </style>
</head>
<body>
<h1>Same HTML order, different placement</h1>
<h2>Normal block flow</h2><div class="demo normal"><a href="#result">First</a>
<a href="#result">Second</a>
<a href="#result">Third</a></div>
<h2>row</h2><div class="demo row"><a href="#result">First</a>
<a href="#result">Second</a>
<a href="#result">Third</a></div>
<h2>column</h2><div class="demo column"><a href="#result">First</a>
<a href="#result">Second</a>
<a href="#result">Third</a></div>
<h2>row-reverse</h2><div class="demo reverse"><a href="#result">First</a>
<a href="#result">Second</a>
<a href="#result">Third</a></div>
<h2>Direct and nested children</h2><div class="demo nested"><div><span>First line of box A</span><span>Second line of box A</span></div><div>Box B</div></div>
<h2>Initial size and growth</h2><div class="initial"><div>Short description</div><div>Two-line description<br>Second line</div><div>Three-line description<br>Second line<br>Third line</div></div>
<p id="result">This is the link destination. Use the links above to check keyboard navigation order.</p>
</body>
</html>

1. Di bagian baris, pastikan ketiga item berada pada baris yang sama. Cukup tambahkan flex-direction: column ke .row untuk mengubahnya menjadi vertikal. Setelah dikonfirmasi, hapus deklarasi tersebut dan kembalikan ke baris aslinya.
2. Perhatikan bagaimana tautan di bagian kolom melebar secara horizontal. Menambahkan align-items: flex-start ke .column membuat tautan lebih dekat ke lebar konten. Hal ini karena sumbu silang dari kolom adalah horizontal. Setelah dibandingkan, hapus deklarasi yang ditambahkan.
3. Di bagian row-reverse, tautan First muncul di kanan, tetapi tetap menjadi tautan pertama di HTML. Tekan tombol Tab untuk memastikan Anda bergerak dari First → Second → Third. Jangan mengubah urutan baca yang penting hanya dengan reverse: urutan visual dapat berbeda dari urutan HTML dan Tab yang tetap.
4. Di bagian anak bersarang, hanya kotak besar A dan B yang ditempatkan berdampingan. Dua span di A tersusun vertikal. Jika Anda menambahkan display: flex pada aturan .nested > div, bahkan susunan internal pun akan berubah. Hapus deklarasi yang ditambahkan setelah memeriksa.
5. Di bagian terakhir, pastikan ketiga kartu memiliki tinggi yang sama, dan pada layar lebar, setiap kartu tidak mengisi seluruh lebar yang tersisa. Memperkecil layar mengurangi lebar kartu tanpa memecah baris. Jika Anda menambahkan flex-shrink: 0 ke .initial > div, itu tidak akan menyusut, menyebabkan overflow horizontal. Hapus deklarasi yang ditambahkan setelah pengecekan.

Mendiagnosis hasil tata letak yang tidak terduga

Di alat pengembang, pilih induk yang sebenarnya, bukan anak yang ingin Anda tata, dan periksa nilai display yang diterapkan. Selanjutnya, periksa flex-direction, width·height·min-width, dan margin dari anak tersebut. Jika flex tertutup oleh aturan lain atau target penataan berada satu level lebih jauh, Anda tidak akan mendapatkan hasil yang diharapkan.

Pemisahan baris berbeda dari mengubah baris dan kolom. Dalam situasi di mana satu garis horizontal meluap, Anda harus terlebih dahulu memutuskan apakah kolomnya sesuai dan apakah flex-wrap diperlukan untuk mempertahankan beberapa baris. Jika konten tersembunyi di ponsel, periksa ukuran minimum yang dapat dipersempit dan urutan baca sebelum menyembunyikannya dengan overflow: hidden. Modifikasi sementara di alat pengembang dapat dikembalikan dengan menyegarkan, dan jika Anda memodifikasi sebuah file, Anda harus mengembalikan nilai yang disimpan sendiri.