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

CSS_Flex_基礎_.pdf

Avatar for darrenyaoyaoyao darrenyaoyaoyao
October 26, 2020
Programming
0
41

 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
50
Pug.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
55
Sass.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
51
jquery.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
57
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
46
bootstrap.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
71
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
82
Javascript_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
110
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
50

Other Decks in Programming

See All in Programming
AIにコードを生成するコードを作らせて、再現性を担保しよう！ / Let AI generate code to ensure reproducibility
Avatar for Yusuke Yamada yamachu
7
6.1k
Javaに鉄道指向プログラミング (Railway Oriented Pro　gramming) のエッセンスを取り入れる/Bringing the Essence of Railway-Oriented Programming to Java
Avatar for takumi.okamoto cocet33000
1
120
TypeScript エンジニアが Android 開発の世界に飛び込んだ話
Avatar for Yui Sakamoto yuisakamoto
6
960
ユーザーにサブドメインの ECサイトを提供したい (あるいは) 2026年函館で一番熱くなるかもしれない言語の話
Avatar for uvb_76 uvb_76
0
180
REST API設計の実践 – ベストプラクティスとその落とし穴
Avatar for 武田 憲太郎 kentaroutakeda
2
320
型付け力を強化するための Hoogle のすゝめ / Boosting Your Type Mastery with Hoogle
Avatar for TAKASE Kazuyuki guvalif
1
230
tsconfigのオプションで変わる型世界
Avatar for Keisuke Ikeda keisukeikeda
1
130
技術懸念に立ち向かい 法改正を穏便に乗り切った話
Avatar for popCashew pop_cashew
0
830
Zennの運営完全に理解した #完全に理解したTalk
Avatar for Yusuke Wada wadayusuke
1
140
SpringBootにおけるオブザーバビリティのなにか
Avatar for irof irof
1
890
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
Avatar for Manfred Steyer manfredsteyer
PRO
0
130
Investigating Multithreaded PostgreSQL
Avatar for Thomas Munro macdice
0
150

Featured

See All Featured
A better future with KSS
Avatar for Kyle Neath kneath
239
17k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
85
4.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
228
22k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
25
2.8k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
71
4.8k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.7k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
23
1.6k
It's Worth the Effort
Avatar for 3n 3n
184
28k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
349
20k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k

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