CSS Flexbox
1
2
3
4
5
6
7
8
CSS Flexbox 佈局模組
在 Flexbox 佈局模組之前，有四種佈局模式
- Block，用於網頁中的區塊
- Inline，用於文字
- Table，用於二維表格資料
- Positioned，用於元素的顯式定位
Flexbox 佈局模組使設計靈活的響應式佈局結構變得更加容易，而無需使用 float 或 positioning。
瀏覽器支援
Flexbox 屬性在所有現代瀏覽器中都得到支援。
| 29.0 | 11.0 | 22.0 | 10 | 48 |
Flexbox 元素
要開始使用 Flexbox 模型，您需要先定義一個 flex 容器。
1
2
3
上面的元素代表一個 flex 容器（藍色區域）以及三個 flex 項。
示例
帶有三個 flex 項的 flex 容器
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
您將在接下來的章節中瞭解更多關於 flex 容器和 flex 項的知識。
