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

CSS_Flex_基礎_.pdf

darrenyaoyaoyao
October 26, 2020
Programming
0
38

 CSS_Flex_基礎_.pdf

darrenyaoyaoyao

October 26, 2020
Tweet

More Decks by darrenyaoyaoyao

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

Other Decks in Programming

See All in Programming
PHPとAPI Platformで作る本格的なWeb APIアプリケーション（入門編） / phpcon 2024 Intro to API Platform
ttskch
0
210
【re:Growth 2024】 Aurora DSQL をちゃんと話します！
maroon1st
0
770
開発者とQAの越境で自動テストが増える開発プロセスを実現する
92thunder
1
180
Monixと常駐プログラムの勘どころ / Scalaわいわい勉強会 #4
stoneream
0
270
命名をリントする
chiroruxx
1
400
CQRS+ES の力を使って効果を感じる / Feel the effects of using the power of CQRS+ES
seike460
PRO
0
130
PSR-15 はあなたのための ものではない？ - phpcon2024
myamagishi
0
110
Security_for_introducing_eBPF
kentatada
0
110
フロントエンドのディレクトリ構成どうしてる？　Feature-Sliced Design 導入体験談
osakatechlab
8
4.1k
「とりあえず動く」コードはよい、「読みやすい」コードはもっとよい / Code that 'just works' is good, but code that is 'readable' is even better.
mkmk884
3
270
Webエンジニア主体のモバイルチームの 生産性を高く保つためにやったこと
igreenwood
0
330
useSyncExternalStoreを使いまくる
ssssota
6
1k

Featured

See All Featured
How to Think Like a Performance Engineer
csswizardry
22
1.2k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Unsuck your backbone
ammeep
669
57k
Thoughts on Productivity
jonyablonski
67
4.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Bash Introduction
62gerente
608
210k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
GitHub's CSS Performance
jonrohan
1030
460k
For a Future-Friendly Web
brad_frost
175
9.4k

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