1-7. Flex Box 彈性框架編排法
彈性框的概念
父層屬性
| no | 應用於 | 屬性名稱 | 說明 | 屬性值 | 說明 | 範例 |
|---|---|---|---|---|---|---|
| 1 | container | display | 彈性框的模式 | flex | inline-flex | ||
| 2 | container | flex-wrap | 內容項目是否換行 | nowrap | wrap | wrap-reverse | w3s | w3s |
| 3 | container | flex-direction | 內容項目排列方向 | row | row-reverse | column | column-reverse | w3s | w3s |
| 4 | container | justify-content | (尚未改變方向時) 內容項目水平對齊方式 |
flex-start | flex-end | center | space-between | space-around | space-evenly |
w3s | w3s |
| 5 | container | align-items | (尚未改變方向時) 內容項目垂直對齊方式 (文字為主) |
stretch | center | flex-start | flex-end | baseline | w3s | w3s |
| 6 | container | align-content | (尚未改變方向時) 內容項目垂直對齊方式 (框架為主) |
stretch | center | flex-start | flex-end | space-between | space-around | space-evenly |
w3s | w3s |
| 7 | container | flex-flow | 同時設定方向及換行 | flex-direction ＋ flex-wrap | w3s | w3s |
以下範例已設定好的部份
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<style>
.container { background-color: #ffc0ee; max-width: 800px; min-height: 200px;
margin: 10px auto; padding: 5px; }
.item { background-color: #a2a2f0; margin: 5px; padding: 5px; }
</style>
1. 彈性框的指定顯示模式 ( display : flex | inline-flex )
Item1
Item2 Item2
Item3 Item3 Item3
2. 內容項目是否換行 ( flex-wrap : nowrap | wrap | wrap-reverse | initial )
Item1
Item2
Item3
Item4
Item5
Item6
Item7
Item8
Item9
Item1
Item2
Item3
Item4
Item5
Item6
Item7
Item8
Item9
Item9
Item9
Item9
Item9
3. 內容項目排列方向 ( flex-direction : row | row-reverse | column | column-reverse | initial )
Item1
Item2 Item2
Item3 Item3 Item3
4. 內容項目水平對齊方式 (尚未改變方向時) ( justify-content : flex-start | flex-end | center | space-between | space-around | space-evenly )
Item1
Item2 Item2
Item3 Item3 Item3
5. 內容項目垂直對齊方式(文字為主) (尚未改變方向時) ( align-items : stretch | center | flex-start | flex-end | baseline | initial )
Item1
Item2 Item2
Item3 Item3 Item3
6. 內容項目垂直對齊方式(框架為主) (尚未改變方向時)
---- 每個 .item 加了設計 width: 100px;
( align-content : stretch | center | flex-start | flex-end | space-between | space-around | space-evenly )
Item1
Item2
Item3
Item4
Item5
Item6
Item7
Item8
Item9
Item1
Item2
Item3
Item4
Item5
Item6
Item7
Item8
Item9
Item9
Item9
Item9
Item9
子層屬性
| no | 應用於 | 屬性名稱 | 說明 | w3s | 範例 | 範例 |
|---|---|---|---|---|---|---|
| 1 | item | flex-grow | 單項寬度的放大比例, 預設 0 表示不會跟著放大, 設定 1 以上為放大比例, 並且會填滿父層空間 |
w3s | w3s | w3s |
| 2 | item | flex-shrink | 單項寬度的縮小比例, 預設1, 設定0表示不會跟著縮小 | w3s | w3s | w3s |
| 3 | item | flex-basis | 單項寬度的初始設定(px、em、%...) | w3s | w3s | w3s |
| 4 | item | flex | 是 flex-grow、flex-shrink 和 flex-basis 的合併簡寫模式 預設值為 0 1 auto |
w3s | w3s | w3s |
| 5 | item | align-self | 指定項目的垂直對齊方式 | w3s | w3s | w3s |
| 6 | item | order | 內容項目指定排列順序, 每個單項預設為 0 | w3s | w3s | w3s |
單項內容寬度的放大、縮小
查看範例結果綜合應用練習
FlexBox Froggy
