← CSS21 / 62

flex-direction: column

Mengubah flex-direction: column memutar kedua axis: main axis jadi vertikal, cross axis jadi horizontal. Konsekuensinya sering mengejutkan — sekarang justify-content mengatur atas-bawah dan align-items mengatur kiri-kanan. Ingat prinsipnya, jangan hafal 'justify = horizontal'. Karena itu ketika layout terasa terbalik setelah kamu mengganti direction, yang perlu ditukar adalah justify-content dengan align-items.

👀 Contoh dulu

.daftar {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* sekarang ATAS-BAWAH  */
  align-items: flex-end;    /* sekarang KIRI-KANAN  */
  height: 200px;
}

Hasilnya: Item tersusun bertumpuk vertikal, terpusat secara vertikal, dan rata ke sisi kanan.

💡 Perhatikan peran keduanya bertukar dibanding row. Karena itu hafalkan 'main axis' bukan 'horizontal'.

📝 Sekarang giliranmu

Susun item secara vertikal dengan flex-direction: column, lalu ratakan ke tengah horizontal memakai align-items: center.

Preview
← SebelumnyaBerikutnya →