ตอนนี้ผู้ใช้สามารถย้ายองค์ประกอบที่จะวางในทิศทางการไหลใด ๆ สามารถแสดงลำดับการย้อนกลับหรือจัดเรียงใหม่ตามสไตล์ และสามารถยุบหรือไม่ยุบแบบไดนามิกตามแกนหลักในขณะที่รักษาขนาดข้ามของคอนเทนเนอร์
Default (ไม่ใช้ display flex)
ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style
Direction row default: Left to right in ltr, right to left in rtl
ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า)
Direction Row-reverse : Right to left in ltr, left to right in rtl
ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า) คลิก Direction row-reverse
Direction Column : same as row but top to bottom
ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า) คลิก Direction column
Direction Column-reverse : same as row but bottom to top
ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า) คลิก Direction column-reverse
Align flex-start รายการจะอยู่ที่จุดเริ่มต้นของแกนข้าม ความแตกต่างระหว่างสิ่งเหล่านี้เป็นเรื่องละเอียดอ่อน และเกี่ยวกับ respecting the flex-direction rules หรือ writing-mode rules
ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า) คลิก Align flex-start
Align Center: items are centered on the cross-axis
ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า) คลิก Align Center
Align Flex-end: รายการจะอยู่ที่ส่วนท้ายของแกนกากบาท ความแตกต่างอีกครั้งนั้นละเอียดอ่อนและเกี่ยวกับ respecting flex-direction rules เทียบกับ writing-mode rules
ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า) คลิก Align flex-end
Align Stretch ยืดให้เต็มคอนเทนเนอร์ (ยังคงคำนึงถึงความกว้างต่ำสุด/ความกว้างสูงสุด)
ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า) คลิก Align stretch
Justify Flex-start items are packed toward the start of the flex-direction.
ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า) คลิก Justify flex-start
Justify center: items are centered along the line
ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า) คลิก Justify center
Justify flex-end: items are packed toward the end of the flex-direction.
ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า) คลิก Justify flex-end
Justify space-between: รายการมีการกระจายอย่างเท่าเทียมกันในบรรทัด รายการแรกอยู่ที่บรรทัดเริ่มต้น รายการสุดท้ายอยู่ที่บรรทัดสิ้นสุด
ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า) คลิก Justify space-between
Justify space-around: รายการจะกระจายอย่างเท่าเทียมกันในบรรทัดโดยมีพื้นที่รอบเท่ากัน โปรดทราบว่าช่องว่างทางสายตานั้นไม่เท่ากัน เนื่องจากสิ่งของทั้งหมดมีพื้นที่เท่ากันทั้งสองด้าน รายการแรกจะมีช่องว่างหนึ่งหน่วยกับขอบคอนเทนเนอร์ แต่มีช่องว่างสองหน่วยระหว่างรายการถัดไป เนื่องจากรายการถัดไปมีระยะห่างของตัวเองที่ใช้
ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า) คลิก Justify space-around
Wrap don’t wrap (default): all flex items will be on one line
ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า)
Wrap flex-start: รายการจะอยู่ที่จุดเริ่มต้นของแกนข้าม ความแตกต่างระหว่างสิ่งเหล่านี้เป็นเรื่องเล็กน้อย และเกี่ยวกับ respecting the flex-direction rules หรือ writing-mode rules
ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า) คลิก Wrap flex-start
Wrap center : items are centered in the cross-axis
ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า) คลิก Wrap center
Wrap flex-end: รายการจะอยู่ที่ส่วนท้ายของแกนกากบาท ความแตกต่างอีกครั้งนั้นละเอียดอ่อนและเกี่ยวกับ respecting flex-direction rules เทียบกับ writing-mode rules
ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า) คลิก Wrap flex-end
Wrap stretch: stretch to fill the container (still respect min-width/max-width)
ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า) คลิก Wrap baseline
Wrap space-between: รายการกระจายอย่างสม่ำเสมอ บรรทัดแรกอยู่ที่จุดเริ่มต้นของคอนเทนเนอร์ในขณะที่บรรทัดสุดท้ายอยู่ที่ส่วนท้าย
ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า) คลิก Wrap space-between
Wrap space-around: รายการกระจายอย่างสม่ำเสมอโดยมีพื้นที่เท่ากันในแต่ละบรรทัด
ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า) คลิก Wrap space-around
