Display Flex

ตอนนี้ผู้ใช้สามารถย้ายองค์ประกอบที่จะวางในทิศทางการไหลใด ๆ สามารถแสดงลำดับการย้อนกลับหรือจัดเรียงใหม่ตามสไตล์ และสามารถยุบหรือไม่ยุบแบบไดนามิกตามแกนหลักในขณะที่รักษาขนาดข้ามของคอนเทนเนอร์

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