แกนหลักและแกนตัดใน Flexbox ของ CSS

เราสามารถพูดถึง flexbox ได้ในสองแง่มุม: แง่มุมแรกคือ แถวหรือคอลัมน์ แง่มุมที่สองคือ ในแง่ของแกน เราได้เข้าใจเกี่ยวกับแถวและคอลัมน์แล้ว ทีนี้ลองมาทำความเข้าใจเกี่ยวกับแกนกัน ความเข้าใจเกี่ยวกับแกน มีความจำเป็นเพื่อใช้ในการจัดเรียงองค์ประกอบในแนวนอนหรือในแนวตั้ง

เมื่อทำงานกับองค์ประกอบ flex จะมีอยู่เสมอทั้ง แกนหลักและแกนตัด เราสามารถจัดเรียงองค์ประกอบ ตามแกนหลัก และในทิศทางตัดกับแกนหลัก แกนหลักสามารถมี4 ทิศทางได้: จากซ้ายไปขวา จากขวาไปซ้าย จากบนลงล่าง และจากล่างขึ้นบน

ทิศทางของแกนตัด ขึ้นอยู่กับ ทิศทางของแกนหลัก: หากแกนหลัก อยู่ในแนวนอน แกนตัดจะชี้จากบน ลงล่าง หากแกนหลักอยู่ในแนวตั้ง แกนตัด จะชี้จากซ้ายไปขวา แกนตัดไม่สามารถมี ทิศทางอื่นนอกเหนือจากนี้ได้

ทิศทางของแกนหลักถูกควบคุมโดยคุณสมบัติ flex-direction หากคุณสมบัตินี้ มีค่าเป็น row - แกนหลักจะชี้ จากซ้ายไปขวา แต่หากมีค่าเป็น row-reverse ก็จะชี้จากขวาไปซ้าย ค่า column จะชี้แกนจากบนลงล่าง ส่วนค่า column-reverse - จากล่างขึ้นบน