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

CSS_Flex_基礎_.pdf

Avatar for darrenyaoyaoyao darrenyaoyaoyao
October 26, 2020
Programming
0
45

 CSS_Flex_基礎_.pdf

Avatar for darrenyaoyaoyao

darrenyaoyaoyao

October 26, 2020
Tweet

More Decks by darrenyaoyaoyao

See All by darrenyaoyaoyao
HTML__CSS_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
52
Pug.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
59
Sass.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
52
jquery.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
59
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
49
bootstrap.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
74
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
87
Javascript_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
110
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
51

Other Decks in Programming

See All in Programming
速いWebフレームワークを作る
Avatar for Yusuke Wada yusukebe
5
1.7k
Improving my own Ruby thereafter
Avatar for monochrome sisshiki1969
1
160
How Android Uses Data Structures Behind The Scenes
Avatar for HyunWoo Lee l2hyunwoo
0
250
ソフトウェアテスト徹底指南書の紹介
Avatar for Hiroki Iseri goyoki
1
150
ぬるぬる動かせ！ Riveでアニメーション実装🐾
Avatar for Kuno Ayana kno3a87
1
190
rage against annotate_predecessor
Avatar for Junichi Kobayashi junk0612
0
160
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
Avatar for Jonghyuk Max Kim mmmaxkim
0
1.5k
Design Foundational Data Engineering Observability
Avatar for suci sucitw
3
190
テストコードはもう書かない：JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
Avatar for makun makun
0
150
MCPとデザインシステムに立脚したデザインと実装の融合
Avatar for Yuku Kotani yukukotani
4
1.4k
Namespace and Its Future
Avatar for Satoshi Tagomori tagomoris
6
700
サーバーサイドのビルド時間87倍高速化
Avatar for PLAID Tech plaidtech
PRO
0
720

Featured

See All Featured
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.4k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
55
13k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.8k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.6k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
9
800
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
302
21k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
656
61k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
55
6.5k

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