CSS3 แนะนำโมเดลกล่องใหม่ - โมเดลกล่องเฟล็กซ์ ซึ่งกำหนดวิธีการกระจายกล่องไปยังกล่องอื่นๆ และวิธีการจัดการพื้นที่ว่าง สิ่งนี้คล้ายกับ XUL (ภาษาโต้ตอบของผู้ใช้ที่ใช้โดย Firefox) และภาษาอื่น ๆ ก็ใช้รูปแบบกล่องเดียวกันเช่น XAML และ GladeXML
เมื่อใช้โมเดลนี้ คุณจะสามารถสร้างเลย์เอาต์ที่ลื่นไหลซึ่งปรับให้เข้ากับหน้าต่างเบราว์เซอร์หรือเลย์เอาต์ที่ยืดหยุ่นที่ปรับให้เข้ากับขนาดตัวอักษรได้อย่างง่ายดาย ตัวอย่างในบทความนี้ใช้โค้ด HTML ต่อไปนี้:
<ร่างกาย>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
</ร่างกาย>
รูปแบบกล่องแบบดั้งเดิมจะจัดเรียงกล่องในแนวตั้งตามโฟลว์ HTML การใช้โมเดล flexbox คุณสามารถระบุลำดับเฉพาะและย้อนกลับได้ หากต้องการเปิดใช้งานโมเดลกล่องแบบยืดหยุ่น เพียงตั้งค่าแอตทริบิวต์การแสดงผลของกล่องโดยให้กล่องย่อยเป็นกล่อง (หรือกล่องอินไลน์)
จอแสดงผล: กล่อง;
การกระจายแนวนอนหรือแนวตั้ง
"box-orient" กำหนดแกนพิกัดของการกระจาย: แนวตั้งและแนวนอน ค่าทั้งสองนี้จะกำหนดวิธีการแสดงกล่อง
ร่างกาย{
จอแสดงผล: กล่อง;
กล่องตะวันออก: แนวนอน;
-
การกระจายแบบย้อนกลับ
"box-direction" สามารถกำหนดลำดับที่กล่องจะปรากฏได้ ตามค่าเริ่มต้น คุณจะต้องกำหนดแกนการกระจายเท่านั้น กล่องต่างๆ จะถูกกระจายตามโฟลว์ html หากเป็นแกนนอน จะกระจายจากซ้ายไปขวา ถ้าเป็นแกนตั้ง จะกระจายจากบนลงล่าง กำหนดค่าแอตทริบิวต์ของ "box-direction" เป็น "reverse" เพื่อกลับลำดับของกล่อง
ร่างกาย {
จอแสดงผล: กล่อง;
กล่องตะวันออก: แนวตั้ง;
ทิศทางกล่อง: ย้อนกลับ;
-
การกระจายแบบเฉพาะเจาะจง
คุณลักษณะ "box-ordinal-group" กำหนดลำดับของการแจกจ่ายกล่อง สามารถควบคุมลำดับการกระจายได้ตามต้องการ กลุ่มถูกกำหนดด้วยตัวเลขเริ่มต้นจาก "1" และโมเดลกล่องจะกระจายกลุ่มเหล่านี้ก่อน และกล่องทั้งหมดเหล่านี้จะอยู่ในแต่ละกลุ่ม การกระจายสินค้าจะเรียงจากเล็กไปใหญ่
ร่างกาย {
จอแสดงผล: กล่อง;
กล่องตะวันออก: แนวตั้ง;
กล่องทิศทาง: ย้อนกลับ;
-
#box1 {
กล่องลำดับกลุ่ม: 2;
-
#box2 {
กล่องลำดับกลุ่ม: 2;
-
#box3 {
กล่องลำดับกลุ่ม: 1;
-
