| Container | ||
|---|---|---|
| flex | inline-flex | เปลี่ยนอิลิเมนต์ให้เป็น flex container | |
| row | column | row-reverse | column-reverse | กำหนดแกนหลักที่ item วางเรียงตาม | |
| flex-start | center | space-between | space-around | space-evenly | กระจาย item ตามแกนหลัก | |
| stretch | center | flex-start | flex-end | baseline | จัด item ตามแกนไขว้ | |
| flex-start | center | stretch | space-between | จัดแถวที่ wrap แล้วเมื่อมีพื้นที่เหลือบนแกนไขว้ | |
| nowrap | wrap | wrap-reverse | ให้ item ขึ้นบรรทัดใหม่แทนการหดตัว | |
| 0.5rem | 8px 16px | ช่องว่างระหว่าง item ทั้งแนวนอนและแนวตั้ง | |
| Item | ||
| 0 | 1 | 2 | item รับพื้นที่ว่างเท่าไรเมื่อเทียบกับพี่น้อง | |
| 0 | 1 | item หดตัวเท่าไรเมื่อพื้นที่ไม่พอ | |
| auto | 200px | 50% | ขนาดตั้งต้นก่อนแบ่งพื้นที่ว่าง | |
| 1 | 1 0 auto | 0 0 200px | รูปย่อของ grow shrink basis | |
| auto | center | flex-start | flex-end | stretch | แทนที่ align-items ของ container สำหรับ item ตัวเดียว | |
| 0 | -1 | 2 | จัดลำดับ item ใหม่โดยไม่แก้ซอร์สโค้ด | |