CSS_Flex_基礎_.pdf

Transcript

1. CSS Flex 盒⼦模型 基礎⼀ 排版進階練習
2. 在 slidepin.cc 儲存這份投影片
3. 今⽇⽬標 https://darrenyaoyao.github.io/
4. https://darrenyaoyao.github.io/
5. Flex Flex 是⼀套排版系統
 display: flex
6. Flex-direction column row
7. Flex 比例 flex: 1 flex: 3
8. Flex 比例 flex: 1 flex: 3
9. align-items
10. position: fixed 固定位置
11. Overscroll 超出範圍，滑動屬性
12. Icon Icon 使⽤ <link rel="stylesheet" href=“https:// fonts.googleapis.com/icon? family=Material+Icons">
13. justify-content
14. 練習⼀ 將左邊的 Youtube menu 還原
15. flex-wrap
16. flex flex 其實是
 flex: flex-grow flex-shrink flex-basis
17. flex-grow 元件的伸展性，是⼀個數值，當空間分配還有剩餘時的 當前元件的伸展性，預設值為，如果設置為 0 則不會 縮放。
18. flex-shrink 元件的收縮性: 元件的伸展性，是⼀個數值，當空間分 配還不⾜時的當前元件的收縮性，預設值為 0 ，如果設 置為 0 則不會縮放。
19. flex-basis 元件的基準值，可使⽤不同的單位值。
20. flex flex : 1
 其實是指 flex-grow : 1