Flexbox เป็นเทคนิคการจัดวางเว็บไซต์ใน CSS ที่ช่วยให้สามารถจัดวางและจัดการพื้นที่บนหน้าเว็บได้อย่างยืดหยุ่น
โดยองค์ประกอบของ Flexbox ประกอบด้วย:
องค์ประกอบของ Flex Box
Container: เป็นส่วนที่ครอบและกำหนดพื้นที่ของ Flexbox โดยใช้คุณสมบัติ display:flex; โดยส่วนที่ใช้งานบ่อยคือ div แต่สามารถใช้กับองค์ประกอบ HTML อื่นๆ ได้ เช่น section, article, หรือ nav
Flex items: เป็นส่วนที่อยู่ภายใน Container และถูกจัดวางโดย Flexbox โดยใช้คุณสมบัติ display:flex-item; สามารถปรับความยาว, ความสูง, ตำแหน่งและลำดับของ Flex items ได้
Main Axis: เป็นแกนหลักที่ใช้ในการจัดวาง Flex items โดยค่าเริ่มต้นจะเป็นแนวนอน (horizontal) แต่สามารถเปลี่ยนเป็นแนวตั้ง (vertical) ได้โดยใช้คุณสมบัติ flex-direction โดยค่าเริ่มต้นจะเป็น row แต่สามารถเปลี่ยนเป็น column ได้
Cross Axis: เป็นแกนรองที่ตั้งโดยอัตโนมัติและคู่กับ Main Axis โดยเริ่มต้นจะเป็นแนวตั้ง (vertical) แต่สามารถเปลี่ยนเป็นแนวนอน (horizontal) ได้
Flex Direction: เป็นคุณสมบัติที่ใช้กำหนดทิศทางการจัดวางของ Flex items โดยค่าเริ่มต้นจะเป็น row หรือแนวนอน แต่สามารถเปลี่ยนเป็น column หรือแนวตั้งได้
Justify Content: เป็นคุณสมบัติ
แบ่งปันกัน เราอยู่กันไม่เกิน 100 ปีหรอกครับ
สุดท้ายก็ทิ้งไว้ที่โลก จะคงเหลือไว้แต่คุณงามความดีที่ให้ระลึกถึงกันครับ
Follow Us / Thanat Sirikitphattana