Materi
Elemen div bersifat block: masing-masing memakai satu baris penuh dan menumpuk ke bawah. Nilai display: flex mengubah elemen menjadi flex container, dan anak-anak langsungnya menjadi flex item yang disusun sepanjang satu sumbu.
- flex-direction: row — sumbu utama mendatar, dari kiri ke kanan (nilai bawaan).
- flex-direction: column — sumbu utama menurun, dari atas ke bawah.
- Sumbu silang selalu tegak lurus terhadap sumbu utama.
.daftar {
display: flex;
flex-direction: row;
}Hanya anak langsung yang menjadi flex item. Isi di dalam anak itu kembali ditata dengan aturannya sendiri: paragraf di dalam kartu tetap menumpuk ke bawah walau kartunya berjajar ke samping.
Dua istilah ini dipakai semua properti Flexbox berikutnya. Sumbu utama adalah arah item berbaris, dan sumbu silang adalah arah tegak lurusnya. Saat arahnya row, sumbu utama mendatar dan sumbu silang menurun; saat arahnya column, keduanya bertukar. Mengubah satu baris flex-direction otomatis membalik arti justify-content dan align-items.
Contoh di luar latihan: baris atas aplikasi kasir yang berisi nama toko di kiri dan tombol keluar di kanan ditulis sebagai satu flex container berarah row. Menu di sisi kiri halaman yang isinya menurun ditulis sebagai flex container berarah column. Keduanya memakai properti yang sama, hanya arah sumbunya yang berbeda.
