Flexbox
display: flex
เรียนรู้ว่า display: flex เปลี่ยน parent ให้เป็น Flex Container และทำให้ลูกโดยตรงเรียงเป็นแถวได้อย่างไร
1. Core Idea
display: flex คือจุดเริ่มต้นของ Flexbox เมื่อกำหนด property นี้ที่ parent element, parent จะกลายเป็น Flex Container และ child โดยตรงทุกตัวจะกลายเป็น Flex Items อัตโนมัติ
- เขียน display: flex ที่ parent ไม่ใช่ child
- child โดยตรงของ parent จะถูกจัดวางด้วยกฎของ Flexbox
- ค่าเริ่มต้นของ Flexbox คือเรียง items จากซ้ายไปขวาในแถวเดียว
2. Mental Model
นึกถึงกล่องปกติเป็นตะกร้าที่วางของซ้อนลงมาเรื่อย ๆ แต่เมื่อเปลี่ยนเป็น flex container กล่องนั้นจะเหมือนถาดที่จัดของด้านในให้อยู่เรียงกันเป็นแถวโดยอัตโนมัติ
display: flex เปลี่ยน parent เป็น Flex Container และ child โดยตรงเป็น Flex Items
3. Rule / Definition
| คำ | ความหมาย | จำอย่างไร |
|---|---|---|
| Flex Container | element ที่มี display: flex | ตัวควบคุม layout |
| Flex Item | child โดยตรงของ container | ตัวที่ถูกจัดวาง |
| Main Axis | แนวที่ item เรียง | ค่าเริ่มต้นคือแนวนอน |
4. Worked Example
- เริ่มจาก HTML ที่มี .container ครอบ .box สามตัว
- ถ้าไม่เขียน display: flex, .box จะซ้อนกันตาม block layout ปกติ
- เมื่อเขียน .container { display: flex; }, browser จะเรียง .box ทั้งสามเป็นแถวเดียวกัน
5. Recap
- display: flex เป็นประตูเข้า Flexbox
- กำหนดที่ parent เพื่อควบคุม child โดยตรง
- บทนี้ยังไม่ต้องจัดกึ่งกลางหรือกระจายช่องว่าง แค่เปิด flex ให้ถูกที่ก่อน
Lab 1: เปิด Flex Container ครั้งแรก
เป้าหมาย: ใส่ display: flex ที่ parent ให้ถูกตัว เพื่อให้กล่อง A, B, C เรียงเป็นแถวเดียวกัน
Lab 2: หา parent ของ card ให้เจอ
เป้าหมาย: ฝึกมองโครงสร้าง HTML แล้วใส่ display: flex ที่ parent ของ card ทั้งหมด ไม่ใช่ที่ card แต่ละใบ