CSS Flexbox
1
2
3
4
5
6
7
8
CSS Flexbox Layout Module
ก่อนโมดูลเค้าโครง Flexbox มีโหมดเค้าโครงสี่โหมด:
- บล็อก สำหรับส่วนต่างๆ ในหน้าเว็บ
- อินไลน์สำหรับข้อความ
- ตาราง สำหรับข้อมูลตารางสองมิติ
- ตำแหน่ง สำหรับตำแหน่งที่ชัดเจนขององค์ประกอบ
โมดูลเลย์เอาต์กล่องแบบยืดหยุ่นช่วยให้ออกแบบโครงสร้างเลย์เอาต์ที่ตอบสนองที่ยืดหยุ่นได้ง่ายขึ้นโดยไม่ต้องใช้ทุ่นหรือการวางตำแหน่ง
รองรับเบราว์เซอร์
คุณสมบัติ flexbox ได้รับการสนับสนุนในเบราว์เซอร์ที่ทันสมัยทั้งหมด
| 29.0 | 11.0 | 22.0 | 10 | 48 |
Flexbox Elements
ในการเริ่มต้นใช้โมเดล Flexbox คุณต้องกำหนดคอนเทนเนอร์แบบยืดหยุ่นก่อน
1
2
3
องค์ประกอบด้านบนแสดงถึงคอนเทนเนอร์แบบยืดหยุ่น (พื้นที่สีน้ำเงิน) ที่มีสามรายการแบบยืดหยุ่น
ตัวอย่าง
คอนเทนเนอร์แบบยืดหยุ่นที่มีสินค้าแบบยืดหยุ่นสามรายการ:
<div
class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับคอนเทนเนอร์แบบยืดหยุ่นและรายการแบบยืดหยุ่นในบทต่อไป