Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

今⽇⽬標

Slide 3

Slide 3 text

https://darrenyaoyao.github.io/

Slide 4

Slide 4 text

Flex-direction column row

Slide 5

Slide 5 text

Flex 比例 flex: 3 flex: 1

Slide 6

Slide 6 text

justify-content

Slide 7

Slide 7 text

align-items

Slide 8

Slide 8 text

RWD 響應式網站 網站排版會隨著螢幕⼤⼩不同
 ⽽有所調整

Slide 9

Slide 9 text

media query @media screen and (max-width: 900px) { .container { } }