Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS_Flex_基礎二.pdf

darrenyaoyaoyao
October 26, 2020
Programming
0
52

 CSS_Flex_基礎二.pdf

darrenyaoyaoyao

October 26, 2020
Tweet

More Decks by darrenyaoyaoyao

See All by darrenyaoyaoyao
HTML__CSS_基礎二.pdf
darrenyaoyaoyao
0
42
Pug.pdf
darrenyaoyaoyao
0
50
Sass.pdf
darrenyaoyaoyao
0
47
jquery.pdf
darrenyaoyaoyao
1
51
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
darrenyaoyaoyao
0
42
bootstrap.pdf
darrenyaoyaoyao
1
63
Javasrcipt_基礎一.pdf
darrenyaoyaoyao
0
78
Javascript_基礎二.pdf
darrenyaoyaoyao
0
110
HTML__CSS_基礎_.pdf
darrenyaoyaoyao
0
46

Other Decks in Programming

See All in Programming
Honoの来た道とこれから
yusukebe
19
3k
CSC509 Lecture 09
javiergs
PRO
0
110
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
150
macOS でできる リアルタイム動画像処理
biacco42
7
1.9k
LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について
layerx
PRO
2
140
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
1
290
役立つログに取り組もう
irof
27
8.7k
カスタムしながら理解するGraphQL Connection
yanagii
1
1.2k
Android 15 でアクションバー表示時にステータスバーが白くなってしまう問題
tonionagauzzi
0
140
Golang と Erlang
taiyow
8
1.9k
Vue3の一歩踏み込んだパフォーマンスチューニング2024
hal_spidernight
3
3.1k
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
150

Featured

See All Featured
Building Applications with DynamoDB
mza
90
6.1k
It's Worth the Effort
3n
183
27k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
How STYLIGHT went responsive
nonsquared
95
5.2k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.6k
Git: the NoSQL Database
bkeepers
PRO
425
64k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
How GitHub (no longer) Works
holman
311
140k
Producing Creativity
orderedlist
PRO
341
39k
Adopting Sorbet at Scale
ufuk
73
9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k

Transcript

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

  2. 今⽇⽬標

  3. https://darrenyaoyao.github.io/

  4. Flex-direction column row

  5. Flex 比例 flex: 3 flex: 1

  6. justify-content

  7. align-items

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

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

    } }