CSS มีวิธีการจัดวางองค์ประกอบต่าง ๆ บนหน้าเว็บหลายวิธี หนึ่งในนั้นคือ “Flexbox” มาดูกันค่ะว่า คำศัพท์พื้นฐานที่เราต้องรู้ก่อนเรียนเรื่อง CSS Flexbox มีอะไรบ้าง
กล่องและสิ่งที่อยู่ในกล่อง
ถ้าเราอยากเข้าใจ Flexbox คำศัพท์ 2 คำแรกที่เราต้องรู้ก็คือ “Flex container” และ “Flex items”
“Flex container” หรือ “container” คือกล่องที่เราใส่ Flex items เอาไว้ จะเป็น 1 ชิ้น หรือเท่าไหร่ก็ได้ ตอนนี้เราใส่กบน้อยน่ารักไว้ 3 ตัว
“Flex items” หรือ “items” คือ อะไรก็ได้ที่อยู่ในกล่องนั้น พูดง่าย ๆ ก็คือ สิ่งที่อยู่ใน container นั้นเอง
เมื่อพูดถึง container ให้นึกถึงกล่องลังกระดาษใหญ่ ๆ ที่เราจะใส่ของลงไปกี่ชิ้นก็ได้
เมื่อพูดถึง items ให้นึกถึงของที่เราใส่เอาไว้ในกล่องนั้น
ดังนั้น
กล่อง คือ container
สิ่งที่อยู่ในกล่อง คือ items
Note:
คำศัพท์ในโค้ด HTML จะแตกต่างกับ CSS เล็กน้อย
เช่น เมื่อเราสร้างกล่องด้วย <div> หนึ่ง <div> และกำหนดให้ในกล่องนั้นมีสิ่งของ 3 ชิ้นอยู่ภายใน เราจะเรียก div นั้นว่า “parent” และเรียกสิ่งของที่อยู่ข้างในกล่องว่า “children”
ดังนั้น
“Parent” ใน HTML ก็คือ “container” ใน Flexbox
“Children” ใน HTML ก็คือ “items” ใน Flexbox
แกนหลัก (Main Axis )
“Main axis” แปลตามตัวคือแกนหลัก ใช้เป็นแกนหลักในการกำหนดทิศทางการจัดวาง items ซึ่งกำหนดมาจาก flex-direction ค่าที่เป็นไปได้มี 4 ค่าคือ
-row (default)
-row-reverse
-column
-column-reverse
ในเบื้องต้น เราจะโฟกัสไปที่ 2 ค่าเท่านั้นคือ row และ column หลังจากเข้าใจ 2 คำนี้กระจ่างแล้ว อีก 2 คำที่เหลือเราก็จะเข้าใจโดยอัตโนมัติ
row
เมื่อพูดถึงคำว่า “row” หรือ “แถว” ให้เรานึกถึงตอนที่ทำการบ้านวิชาคณิตศาสตร์ และต้องขีดเส้นใต้ขั้นโจทย์แต่ละข้ออยู่เสมอ
เวลาเราขีดเส้นใต้ จะเริ่มขีดจากซ้ายไปขวา หรือขวามาซ้ายก็ได้ สุดท้ายเราก็ได้เส้นขั้น “แนวนอน” เหมือนกัน
Coulmn
เมื่อพูดถึงคำว่า “column” ให้นึกถึงหน้าหนังสือพิมพ์ที่มีหลาย ๆ คอลัมน์ หากลองขีดเส้นผ่านระหว่างแต่ละคอลัมน์ เราจะต้องขีดจากด้านบนลงมาด้านล่าง หรือด้านล่างขึ้นไปด้านบนก็ได้ เราก็จะได้เส้น “แนวตั้ง” เหมือนกัน
Row VS Column
พอจะเห็นความแตกต่างของ row กับ column หรือยังคะ?
“row” คือ เส้นแนวนอน (ซ้ายไปขวา – ขวามาซ้าย)
“column” คือ เส้นแนวตั้ง (บนลงล่าง – ล่างขึ้นบน)
แกนไขว้ (Cross Axis)
“Cross axis” หรือแกนไขว้ หากพูดให้เข้าใจง่าย ๆ “Cross axis” คือแกนที่มีทิศทางตรงกันข้ามกับ “Main axis”
ทวนอีกครั้งนะคะ “Main axis” มาจากการกำหนดค่า flex-direction
ดังนั้น
ถ้า flex-direction เป็น “row”
Cross axis คือ “column”
ถ้า flex-direction เป็น “column”
Cross axis คือ “row”
หลักการนี้ทำให้เราจัดตำแหน่ง items ได้ทั้งแนวนอน และแนวตั้ง หลายคนสับสนกับนิยามของ Flexbox ที่บอกว่าออกแบบมาเพื่อจัดการ layout แบบ 1 มิติ (one-dimensional) แต่ทำไมจัดตำแหน่งได้ทั้งแนวตั้งและแนวนอน?
ความหมายของคำว่า 1 มิติของ Flexbox คือ การที่เราจัดการกับ items ได้ทีละ 1 แกน (axis) เท่านั้น ต่างจาก Grid เรากำหนดค่าให้ items ได้ทั้งแนวนอนและแนวตั้งในคำสั่งเดียว Grid จึงเป็นการจัดการ layout แบบ 2 มิติ
เจาะลึก Cross Axis
ย้อนกลับมาดูนิยามของคำว่า “Cross axis” กันสักนิด ที่ MDN บอกว่า Cross axis ใน Flexbox คือเส้นที่ตั้งฉากกับ Main axis
“ตั้งฉาก” หมายความว่า เส้น 2 เส้นทำให้เกิดมุม 90 องศา
อย่างพึ่งตกใจนะคะ ที่เห็นสัญลักษณ์ทางคณิตศาสตร์โผลขึ้นมาในเรื่อง CSS
เมื่อเรารู้ว่า การรวมตัวกันของคณิตศาสตร์ ศิลปะ และวิทยาศาสตร์ สร้างสรรค์สิ่งมหัศจรรย์เกิดขึ้นมาบนโลกใบนี้มากเพียงใด เราก็จะตกหลุมรักและหลงใหลในคณิตศาสตร์มากเท่านั้น 🙂
ย้อนกลับไปที่รูปวงกลม ตอนเป็นเด็กเราเรียนมาว่า “วงกลม 1 วงทำมุม 360 องศา”
หากเราแบ่งครึ่งวงกลม ก็จะได้เส้นตรงหรือทำมุม 180 องศา (360 / 2 = 180)
หากเราแบ่งครึ่งเส้นตรงอีกครั้ง เราจะได้มุม 90 องศา (180 / 2 = 90)
นี่แหละค่ะที่เราเรียกว่า “มุมฉาก” ความสัมพันธ์ของเส้น 2 เส้นที่ทำให้เกิดมุม 90 องศา เราเรียกว่า “เส้นตั้งฉาก” (perpendicular) **จำหลักการนี้ไว้ให้ดีนะคะ มันจะทำให้เราเข้าใจ Cross axis กระจ่างเลยค่ะ
ย้อนกลับมาที่ Flexbox ถ้าพูดถึง Main axis นั้นหมายความว่าเราพูดถึง flex-direction เพราะค่าของ flex-direction คือตัวกำหนดว่า Main axis คืออะไร
ถ้า flex-direction คือ “row” หรือ “แนวนอน” เราต้องขีดเส้นแนวตั้ง เพื่อให้ได้มุม 90 องศา เส้นแนวตั้งที่เราขีดลงไปนั้นแหละ คือ “Cross axis”
ถ้า flex-direction คือ “column” หรือ “แนวตั้ง” เราต้องขีดเส้นแนวนอน เพื่อให้ได้มุม 90 องศา เส้นแนวนอนที่เราขีดลงไปนั้นแหละ คือ “Cross axis”
เห็นหรือยังคะว่า “Cross axis” ไม่ได้มีแกนหรือทิศทางเป็นของตัวเอง มันจะเป็น row หรือ column ขึ้นอยู่กับว่า Main axis คืออะไร
การที่ Cross axis ทำมุมฉากกับ Main axis มันจะได้เส้นที่ตรงกันข้าม ระหว่าง row และ column เสมอ
นั้นคือเหตุผลที่เราสรุปว่า “Cross axis” คือเส้นที่มีแกนตรงข้ามกับ Main axis
สรุป
พื้นฐานที่ต้องรู้ก่อนเรียน Flexbox คือเรื่องของ container และ items เราสามารถจัดวาง items ใน container ได้ตามทิศทางที่กำหนดโดยใช้ flex-direction
คำศัพท์
-Container / Parent : กล่องที่ใช้ใส่ items
-Items / Children : สิ่งที่อยู่ใน container
-Main Axis : แกนหลัก กำหนดโดย flex-direction
-Cross Axis : แกนที่ตรงข้ามกับ Main axis
-row : เส้นแนวนอน (horizontal)
-column : เส้นแนวตั้ง (vertical)
อ้างอิง
A Complete Guide to Flexbox (CSS-Tricks)
