Flexbox
flex-wrap
เรียนรู้วิธีให้ Flex Items ตัดขึ้นบรรทัดใหม่เมื่อพื้นที่ในแถวเดียวไม่พอ โดยไม่ต้องใช้เทคนิคของบทอนาคต
1. Core Idea
flex-wrap บอก flex container ว่าเมื่อ items รวมกันกว้างเกินแถวเดียว จะยอมตัดขึ้นบรรทัดใหม่หรือไม่ ค่าเริ่มต้นคือ nowrap ซึ่งพยายามให้อยู่แถวเดียว
- nowrap: อยู่แถวเดียว เป็นค่าเริ่มต้น
- wrap: ตัดขึ้นบรรทัดใหม่เมื่อพื้นที่ไม่พอ
- wrap-reverse: ตัดบรรทัดใหม่แบบย้อนทิศของ Cross Axis
2. Mental Model
นึกถึงการเรียงป้ายชื่อบนโต๊ะ ถ้าโต๊ะไม่กว้างพอและไม่อนุญาตให้ขึ้นแถวใหม่ ป้ายจะเบียดหรือล้น แต่ถ้าใช้ wrap ป้ายที่เหลือจะย้ายลงแถวถัดไป
wrap ทำให้ items ที่ไม่พอแถวแรกย้ายลงแถวใหม่
3. Rule / Definition
| ค่า | พฤติกรรม | ใช้เมื่อ |
|---|---|---|
| nowrap | ทุก item พยายามอยู่แถวเดียว | เมนูสั้นหรือ toolbar เล็ก |
| wrap | item ที่เกินขึ้นแถวใหม่ | tag list หรือ card list |
| wrap-reverse | ขึ้นแถวใหม่แบบย้อน Cross Axis | กรณี layout เฉพาะทาง |
4. Code Example
5. Recap
- flex-wrap กำหนดที่ flex container
- wrap ทำงานเมื่อ items ไม่พอพื้นที่แถวเดียว
- ควรกำหนดขนาดพื้นฐานของ item เช่น width เพื่อคุมจำนวนต่อแถวให้อ่านง่าย