Tweet
Tweet

Slide 1

Slide 1 text

CSS Flex 盒⼦模型 基礎⼀ 排版進階練習

Slide 2

Slide 2 text

在 slidepin.cc 儲存這份投影片

Slide 3

Slide 3 text

今⽇⽬標 https://darrenyaoyao.github.io/

Slide 4

Slide 4 text

https://darrenyaoyao.github.io/

Slide 5

Slide 5 text

Flex Flex 是⼀套排版系統
 display: flex

Slide 6

Slide 6 text

Flex-direction column row

Slide 7

Slide 7 text

Flex 比例 flex: 1 flex: 3

Slide 8

Slide 8 text

Flex 比例 flex: 1 flex: 3

Slide 9

Slide 9 text

align-items

Slide 10

Slide 10 text

position: fixed 固定位置

Slide 11

Slide 11 text

Overscroll 超出範圍，滑動屬性

Slide 12

Slide 12 text

Icon Icon 使⽤

Slide 13

Slide 13 text

justify-content

Slide 14

Slide 14 text

練習⼀ 將左邊的 Youtube menu 還原

Slide 15

Slide 15 text

flex-wrap

Slide 16

Slide 16 text

flex flex 其實是
 flex: flex-grow flex-shrink flex-basis

Slide 17

Slide 17 text

flex-grow 元件的伸展性，是⼀個數值，當空間分配還有剩餘時的 當前元件的伸展性，預設值為，如果設置為 0 則不會 縮放。

Slide 18

Slide 18 text

flex-shrink 元件的收縮性: 元件的伸展性，是⼀個數值，當空間分 配還不⾜時的當前元件的收縮性，預設值為 0 ，如果設 置為 0 則不會縮放。

Slide 19

Slide 19 text

flex-basis 元件的基準值，可使⽤不同的單位值。

Slide 20

Slide 20 text

flex flex : 1
 其實是指 flex-grow : 1