響應式網頁前端整合設計講義 TS-RWD-handout

CSS3 Flex Box 彈性框的概念

有關 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

no	應用於	屬性名稱	說明	w3s	範例	範例
8	item	flex-grow	單項寬度的放大比例, 預設 0 表示不會跟著放大, 設定 1 以上為放大比例, 並且會填滿父層空間	w3s	w3s	w3s
9	item	flex-shrink	單項寬度的縮小比例, 預設1, 設定0表示不會跟著縮小	w3s	w3s	w3s
10	item	flex-basis	單項寬度的初始設定(px、em、%...)	w3s	w3s	w3s
11	item	flex	是 flex-grow、flex-shrink 和 flex-basis 的合併簡寫模式預設值為 0 1 auto	w3s	w3s	w3s
12	item	align-self	指定項目的垂直對齊方式	w3s	w3s	w3s
13	item	order	內容項目指定排列順序, 每個單項預設為 0	w3s	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 ) TOP

.container1 { display: block; } /* 這是預設, 下圖不會變 */

.container1 { display: flex; } /* 雷同於 block 的彈性框 */

.container1 { display: inline-flex; } /* 雷同於 inline-block 的彈性框 */

Item1

Item2 Item2

Item3 Item3 Item3

2. 內容項目是否換行 TOP ( flex-wrap : nowrap | wrap | wrap-reverse | initial )

.container6 { display: flex; flex-wrap: nowrap; } /* 這是預設，內容項目排在同一列不換行 */

.container6 { display: flex; flex-wrap: wrap; } /* 內容項目依項目超過可以換行 */

.container6 { display: flex; flex-wrap: wrap-reverse; } /* 內容項目依項目寬度可以換行但換行順序反轉 */

.container6 { display: flex; flex-wrap: initial; } /* (初始預設) 同 nowrap */

Item1

Item2

Item3

Item4

Item5

Item6

Item7

Item8

Item9

Item1

Item2

Item3

Item4

Item5

Item6

Item7

Item8

Item9

3. 內容項目排列方向 TOP
( flex-direction : row | row-reverse | column | column-reverse | initial )

.container2 { display: flex; flex-direction: row; } /* 讓內容項目由左至右橫向排版 */

.container2 { display: flex; flex-direction: row-reverse; } /* 讓內容項目由右至左橫向排版 */

.container2 { display: flex; flex-direction: column; } /* 讓內容項目由上至下縱向排版 */

.container2 { display: flex; flex-direction: column-reverse; } /* 讓內容項目由下至上縱向排版 */

.container2 { display: flex; flex-direction: initial; } /* (初始預設) 同 row */

Item1

Item2 Item2

Item3 Item3 Item3

4. 內容項目水平對齊方式 (尚未改變方向時) TOP
( justify-content : flex-start | flex-end | center | space-between | space-around | space-evenly )

.container3 { display: flex; justify-content: flex-start; } /* 整個內容靠左(項目由左至右) */

.container3 { display: flex; justify-content: flex-end; } /* 整個內容靠右(項目由左至右) */

.container3 { display: flex; justify-content: center; } /* 整個內容置中對齊 */

.container3 { display: flex; justify-content: space-between; } /* 讓內容項目分散對齊 (起始與結尾不含margin) */

.container3 { display: flex; justify-content: space-around; } /* 讓內容項目水平等距分佈(左右有margin) */

.container3 { display: flex; justify-content: space-evenly; } /* 讓內容項目水平等距分佈(左右有相同留白) */

.container3 { display: flex; justify-content: initial; } /* (初始預設) 同 flex-start */

Item1

Item2 Item2

Item3 Item3 Item3

5. 內容項目垂直對齊方式(文字為主) (尚未改變方向時) TOP
( align-items : stretch | center | flex-start | flex-end | baseline | initial )

.container4 { display: flex; align-items: stretch; } /* 內容項目與外層同高 */

.container4 { display: flex; align-items: center; } /* 內容項目垂直置中對齊 */

.container4 { display: flex; align-items: flex-start; } /* 內容項目垂直靠上對齊 */

.container4 { display: flex; align-items: flex-end; } /* 內容項目垂直靠下對齊 */

.container4 { display: flex; align-items: baseline; } /* 內容項目依文字基底線對齊 */

.container4 { display: flex; align-items: initial; } /* (初始預設) 同 stretch */

Item1

Item2 Item2

Item3 Item3 Item3

6. 內容項目垂直對齊方式(框架為主) (尚未改變方向時) TOP
---- 每個 .item 加了設計 width: 100px;
---- 如果內容項目沒有超過一列、沒有換行呈現，那麼這個設定就沒有變化
( align-content : stretch | center | flex-start | flex-end | space-between | space-around | space-evenly )

.container5 { display: flex; flex-wrap: wrap; align-content: stretch; }
/* 內容項目垂直平均分配高度, 內容多的分配比例較多, 同列等高 */

.container5 { display: flex; flex-wrap: wrap; align-content: center; }
/* 內容項目垂直置中, 同列以最多內容的為等高的高度 */

.container5 { display: flex; flex-wrap: wrap; align-content: flex-start; }
/* 內容項目垂直靠上, 同列以最多內容的為等高的高度 */

.container5 { display: flex; flex-wrap: wrap; align-content: flex-end; }
/* 內容項目垂直靠下, 同列以最多內容的為等高的高度 */

.container5 { display: flex; flex-wrap: wrap; align-content: space-between; }
/* 內容項目垂直分散對齊 (起始與結尾不含margin) */

.container5 { display: flex; flex-wrap: wrap; align-content: space-around; }
/* 內容項目上下等距分佈 (項目上下有margin) */

.container5 { display: flex; flex-wrap: wrap; align-content: space-evenly; }
/* 內容項目上下等距分佈 (項目上下有相同留白) */

.container5 { display: flex; flex-wrap: wrap; align-content: initial; } /* (初始預設) 同 stretch */

Item1

Item2

Item3

Item4

Item5

Item6

Item7

Item8

Item9

1-12. CSS 新增功能與範例再學習 (依需求挑選學習)

CSS3 Flex Box 彈性框的概念

有關 Flex Box 彈性框的新屬性

範例已設定好的部份

1. 彈性框的指定顯示模式 ( display : flex | inline-flex ) TOP

2. 內容項目是否換行 TOP ( flex-wrap : nowrap | wrap | wrap-reverse | initial )

3. 內容項目排列方向 TOP
( flex-direction : row | row-reverse | column | column-reverse | initial )

4. 內容項目水平對齊方式 (尚未改變方向時) TOP
( justify-content : flex-start | flex-end | center | space-between | space-around | space-evenly )

5. 內容項目垂直對齊方式(文字為主) (尚未改變方向時) TOP
( align-items : stretch | center | flex-start | flex-end | baseline | initial )

【綜合測試學習範例】

測試練習：導覽按鈕在導覽區的右下角參考結果

測試練習：導覽按鈕在導覽區的水平中央垂直貼下參考結果

測試練習：導覽按鈕在導覽區的正中央參考結果

測試練習：圖文排版、奇偶左右換位、上下偏移錯位參考結果

測試練習：單項內容寬度的放大、縮小參考結果

1-12. CSS 新增功能與範例再學習 (依需求挑選學習)

CSS3 Flex Box 彈性框的概念

有關 Flex Box 彈性框的新屬性

範例已設定好的部份

1. 彈性框的指定顯示模式 ( display : flex | inline-flex ) TOP

2. 內容項目是否換行 TOP ( flex-wrap : nowrap | wrap | wrap-reverse | initial )

3. 內容項目排列方向 TOP ( flex-direction : row | row-reverse | column | column-reverse | initial )

4. 內容項目水平對齊方式 (尚未改變方向時) TOP ( justify-content : flex-start | flex-end | center | space-between | space-around | space-evenly )

5. 內容項目垂直對齊方式(文字為主) (尚未改變方向時) TOP ( align-items : stretch | center | flex-start | flex-end | baseline | initial )

【綜合測試學習範例】

測試練習：導覽按鈕在導覽區的右下角 參考結果

測試練習：導覽按鈕在導覽區的水平中央垂直貼下 參考結果

測試練習：導覽按鈕在導覽區的正中央 參考結果

測試練習：圖文排版、奇偶左右換位、上下偏移錯位 參考結果

測試練習：單項內容寬度的放大、縮小 參考結果

3. 內容項目排列方向 TOP
( flex-direction : row | row-reverse | column | column-reverse | initial )

4. 內容項目水平對齊方式 (尚未改變方向時) TOP
( justify-content : flex-start | flex-end | center | space-between | space-around | space-evenly )

5. 內容項目垂直對齊方式(文字為主) (尚未改變方向時) TOP
( align-items : stretch | center | flex-start | flex-end | baseline | initial )

測試練習：導覽按鈕在導覽區的右下角參考結果

測試練習：導覽按鈕在導覽區的水平中央垂直貼下參考結果

測試練習：導覽按鈕在導覽區的正中央參考結果

測試練習：圖文排版、奇偶左右換位、上下偏移錯位參考結果

測試練習：單項內容寬度的放大、縮小參考結果