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
51
Pug.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
59
Sass.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
52
jquery.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
58
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
48
bootstrap.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
73
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
83
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
Comparing decimals in Swift Testing
Avatar for 417.72KI 417_72ki
0
160
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
Avatar for SEGADevTech segadevtech
2
740
iOS開発スターターキットの作り方
Avatar for akidon0000 akidon0000
0
230
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
Avatar for Masahiko Sakakibara rdlabo
0
430
QA x AIエコシステム段階構築作戦
Avatar for Osu osu
0
240
NEWT Backend Evolution
Avatar for Rodrigo Ramirez xpromx
1
170
一人でAIプロダクトを作るならAIにはもっと働いてもらいたい / I want AI to work harder
Avatar for r-kagaya rkaga
1
140
kiroでゲームを作ってみた
Avatar for 入井 啓太 iriikeita
0
140
AIに安心して任せるためにTypeScriptで一意な型を作ろう
Avatar for Yuki Yata arfes0e2b3c
0
330
Advanced Micro Frontends: Multi Version/ Framework Scenarios
Avatar for Manfred Steyer manfredsteyer
PRO
0
140
Understanding Kotlin Multiplatform
Avatar for HyunWoo Lee l2hyunwoo
0
250
SwiftでMCPサーバーを作ろう！
Avatar for giginet giginet
PRO
2
220

Featured

See All Featured
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
790
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
34
6k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.6k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
130
19k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
1k

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