Flexbox
flex-grow / shrink / basis
เรียนรู้การควบคุมการขยาย หด และขนาดตั้งต้นของ Flex Items ด้วย flex-grow, flex-shrink, flex-basis และ flex shorthand
1. Core Idea
เมื่อ flex container มีพื้นที่เหลือหรือพื้นที่ไม่พอ browser ต้องตัดสินใจว่า item ไหนควรขยาย หด หรือเริ่มจากขนาดเท่าไร กลุ่ม property flex-grow, flex-shrink และ flex-basis ใช้ตอบคำถามนี้
- flex-grow: สัดส่วนการรับพื้นที่ที่เหลือ
- flex-shrink: สัดส่วนการยอมหดเมื่อพื้นที่ไม่พอ
- flex-basis: ขนาดตั้งต้นก่อน grow หรือ shrink ทำงาน
- flex: shorthand สำหรับเขียน grow shrink basis ในบรรทัดเดียว
2. Mental Model
นึกถึงโต๊ะประชุมที่มีพื้นที่ว่าง flex-basis คือเก้าอี้เริ่มต้นของแต่ละคน flex-grow คือใครขอพื้นที่เพิ่มได้มากแค่ไหน และ flex-shrink คือใครยอมลดพื้นที่เมื่อโต๊ะแคบ
grow, shrink และ basis ทำงานร่วมกันเพื่อแบ่งพื้นที่ใน Flexbox
3. Rule / Definition
| property | ค่าเริ่มต้น | หน้าที่ |
|---|---|---|
| flex-grow | 0 | ไม่ขยายรับพื้นที่เหลือถ้าไม่สั่ง |
| flex-shrink | 1 | ยอมหดเมื่อพื้นที่ไม่พอ |
| flex-basis | auto | เริ่มจากขนาดเนื้อหาหรือ width ที่เกี่ยวข้อง |
| flex | ขึ้นกับรูปแบบที่เขียน | shorthand เช่น flex: 1 หรือ flex: 0 0 180px |
รูปแบบ shorthandCSS
sidebar ไม่ขยาย ไม่หด และเริ่มที่ 180px ส่วน content รับพื้นที่ที่เหลือ
4. Code Example
5. Recap
- grow ใช้กับพื้นที่เหลือ
- shrink ใช้เมื่อพื้นที่ไม่พอ
- basis คือขนาดตั้งต้นก่อนคำนวณ
- flex shorthand เหมาะเมื่ออยากกำหนดทั้งสามค่าให้ชัด