Item Flow ตอนที่ 1: วิธีตั้งค่าโครงสร้างเว็บแบบใหม่ของ CSS

ที่มา

เมื่อเวลาผ่านไปนาน Flexbox และ Grid layout ก็สามารถทำได้ด้วย CSS เพียงอย่างเดียว แต่ Masonry layout นั้นจนถึงตอนนี้ก็ยังต้องอาศัยพลังของ JavaScript อยู่เสมอ เลย์เอาต์นี้จึงเป็นประเด็นถกเถียงกันหลายครั้งระหว่างเบราว์เซอร์ต่าง ๆ Chrome ได้สร้างเลย์เอาต์แบบใหม่ขึ้นมา (display: masonry) ส่วน Firefox และ Safari เลือกใช้วิธีตั้งค่า grid-template-*: collapse เพื่อรองรับ

แต่มีคนเสนอ แนวทางที่แตกต่างจากเดิมมาก โดยเสนอให้รวม Masonry, Grid และ Flexbox layout เข้าด้วยกัน

รวม flow ของ Flexbox และ Grid เข้าด้วยกัน

เดิมทีวิธีตั้งค่า flow ขององค์ประกอบภายในนั้นแตกต่างกันไปตามแต่ละเลย์เอาต์

.container {  
    /* Flexbox */  
    flex-direction: row | row-reverse | column | column-reverse;  
    flex-wrap: nowrap | wrap | wrap-reverse;  
    /* flex-direction + flex-wrap */  
    flex-flow: <flex-direction> <flex-wrap>;  
  
    /* Grid */  
    grid-auto-flow: row | column | dense;  
}  

ฟีเจอร์นี้มีแผนจะถูกรวมเป็นความสามารถดังต่อไปนี้

• item-direction
• item-wrap
• item-pack
• item-slack

item-direction

กำหนดทิศทางการไหลขององค์ประกอบภายใน ใช้แทนพร็อพเพอร์ตี flex-direction, grid-auto-flow

.container {  
    item-direction: row | row-reverse | column | column-reverse;  
}  

item-wrap

กำหนดพฤติกรรมและทิศทางเมื่อมีองค์ประกอบล้นหนึ่งบรรทัดขณะจัดเรียง ใช้แทนพร็อพเพอร์ตี flex-wrap

.container {  
    item-wrap: auto || [[nowrap | wrap] | [normal | reverse]];  
}  

Grid layout ใช้รูปแบบ wrap เป็นค่าเริ่มต้น แต่ถ้าตั้ง item-wrap: nowrap องค์ประกอบทั้งหมดจะถูกเรียงอยู่ในบรรทัดเดียว และยังสามารถสร้างเลย์เอาต์ที่มีความกว้างเท่ากันได้ด้วย

item-pack

กำหนดวิธีการจัดวางองค์ประกอบภายใน ใช้แทนพร็อพเพอร์ตี grid-auto-flow: dense

.container {  
    item-pack: normal | dense;  
}  

เดิม Flexbox ไม่มีความสามารถนี้ แต่เมื่อเพิ่ม item-pack: dense ก็จะสามารถจัดวางแบบเดียวกับ Grid ได้ ตัวอย่างเช่น Flexbox แบบเดิมที่เปิด wrap ไว้ หากระหว่างจัดวางพบว่าพื้นที่ว่างในบรรทัดหนึ่งเล็กกว่าความกว้างขององค์ประกอบ ก็จะย้ายไปบรรทัดถัดไปทันที แต่ต่อจากนี้จะสามารถทำให้ระบบตรวจสอบก่อนว่าในบรรทัดก่อนหน้ามีช่องที่ใส่องค์ประกอบนั้นได้หรือไม่ และถ้ามีก็ใส่ลงตรงนั้นก่อน

นอกจากนี้ยังสามารถเพิ่มรูปแบบใหม่ที่ไม่เคยมีมาก่อนได้ด้วย

• item-pack: balance: คล้ายกับ text-wrap: balance โดยสามารถปรับจำนวนองค์ประกอบในแต่ละบรรทัดให้ใกล้เคียงกันได้
• item-pack: collapse: ทำให้สร้าง Masonry layout ซึ่งเป็นเป้าหมายสุดท้ายได้อย่างง่ายดาย

item-slack

เป็นพร็อพเพอร์ตีสำหรับกำหนดขนาดพื้นที่ว่างขั้นต่ำที่ควรเหลือไว้ในแต่ละบรรทัดระหว่างการจัดวางองค์ประกอบภายใน ใช้แทนพร็อพเพอร์ตี grid-slack, masonry-slack ที่เคยถูกเสนอไว้ ชื่อ item-slack เองก็ยังอยู่ระหว่างการถกเถียงกัน (ปัจจุบันได้ข้อสรุปเป็น flow-tolerance)

รวมเข้าด้วยกัน

ตอนนี้ถ้าจะสร้าง Flexbox ที่เรียงลงด้านล่าง ก็สามารถตั้งค่าแบบนี้ได้

.container {  
    display: flex;  
    item-direction: column;  
    item-wrap: nowrap;  
}  

และยังมีวิธีที่สั้นกว่านี้ซึ่งกำลังจะตามมา

.container {  
    display: flex;  
    item-flow: column nowrap;  
}  

ชื่อและวิธีการทำงานของพร็อพเพอร์ตีนี้ยังอยู่ระหว่างการถกเถียงกัน

---

ปัจจุบัน Masonry layout ถูกเปลี่ยนเป็น display: grid-lanes แล้ว แต่พร็อพเพอร์ตีตระกูล item-* ยังได้รับการพูดคุยในเชิงบวกอยู่

• Unifying grid-auto-flow and flex-flow(item-flow discussions)
• Decide on a name for item-slack(flow-tolerance finalized)
• Brick by brick: Help us build CSS Masonry
• CSS Grid Lanes

โดยส่วนตัวแล้ว เวลารวมทุกอย่างเข้าด้วยกัน ถ้าสามารถละ display: flex หรือ grid ไปได้ก็น่าจะดีเหมือนกัน