CSS Flexbox Layout Module - คู่มือครอบคลุม

ใช้ Flexbox Layout Module ออกแบบ Layout ที่ยืดหยุ่น Responsive ได้ง่าย ประกอบด้วย Flex Container และ Flex Items

คุณสมบัติของ Flex Container:

• flex-direction — ทิศทาง Main Axis (row, column, row-reverse, column-reverse)
• flex-wrap — การWrap (nowrap, wrap, wrap-reverse)
• flex-flow — Shorthand ของ direction + wrap
• justify-content — จัดแนว Main Axis (flex-start, center, space-between, เป็นต้น)
• align-items — จัดแนว Cross Axis (stretch, center, flex-start, เป็นต้น)
• align-content — จัดแนวหลายบรรทัด Cross Axis

คุณสมบัติของ Flex Items:

• order — ลำดับการแสดง
• flex-grow — ขยายเติมพื้นที่
• flex-shrink — หดตัวเมื่อพื้นที่ไม่พอ
• flex-basis — ขนาดเริ่มต้น
• flex — Shorthand ของ grow, shrink, basis
• align-self — จัดแนว Cross Axis แบบแต่ละ Item