Sumbu Utama dan Sumbu Silang dalam Blok Flex di CSS

Tentang flexbox dapat dibicarakan dalam dua istilah: pertama adalah - baris atau kolom, kedua - dalam istilah sumbu. Dengan baris dan kolom kita sudah membahasnya, sekarang mari kita bahas tentang sumbu. Pemahaman sumbu diperlukan untuk menyelaraskan elemen secara horizontal atau vertikal.

Ketika bekerja dengan elemen flex selalu ada sumbu utama dan sumbu silang. Kita dapat menyelaraskan elemen sepanjang sumbu utama dan melintangi sumbu utama. Sumbu utama dapat memiliki 4 arah: dari kiri ke kanan, dari kanan ke kiri, dari atas ke bawah dan dari bawah ke atas.

Arah sumbu silang bergantung pada arah sumbu utama: jika sumbu utama horizontal, maka sumbu silang mengarah dari atas ke bawah, jika sumbu utama vertikal, maka sumbu silang mengarah dari kiri ke kanan. Arah lain tidak dimiliki oleh sumbu silang.

Arah sumbu utama diatur oleh properti flex-direction. Jika properti ini memiliki nilai row - sumbu utama mengarah dari kiri ke kanan, jika nilainya row-reverse, maka dari kanan ke kiri. Nilai column mengarahkan sumbu dari atas ke bawah, dan nilai column-reverse - dari bawah ke atas.