Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

CSS_Flex_基礎_.pdf

Avatar for darrenyaoyaoyao darrenyaoyaoyao
October 26, 2020
Programming
70
0

 CSS_Flex_基礎_.pdf

Avatar for darrenyaoyaoyao

darrenyaoyaoyao

October 26, 2020

More Decks by darrenyaoyaoyao

See All by darrenyaoyaoyao
HTML__CSS_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
78
Pug.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
96
Sass.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
79
jquery.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
110
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
80
bootstrap.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
95
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
100
Javascript_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
150
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
79

Other Decks in Programming

See All in Programming
[2026-10-14](C)Re:ゼロから始める異世界生活〜始まりの終わりと終わりの始まり〜
Avatar for tosite tosite
0
180
Kotlinの15年とServer-Side Kotlin
Avatar for Takehata Naoto n_takehata
1
170
Performance Optimization With LLMs
Avatar for xLeitix xleitix
0
230
気持ちぃ〜角丸 Squircle
Avatar for ryu ryu1013
0
370
Web Framework Benchmark Battle 2026, Any%
Avatar for Akira Matsuda a_matsuda
3
3.1k
Railsバージョンを4倍にした話
Avatar for OPTiM optim
0
840
golang-bob.pdf
Avatar for Yura Iwatsuka iwatsukayura
0
150
Spec-Driven Development - Why Vaadin Is the Perfect Fit
Avatar for Simon Martinelli simas
PRO
0
180
学びを記事・スライド・Xへ高速展開する― AI-assisted Learning Loopで回すコンテンツ生成術
Avatar for Ochtum ochtum
0
170
私なりのハーネスエンジニアリング ～独自の言語処理系の開発を通して～
Avatar for 瀬尾佳隆 seosoft
0
140
Zero-Tap Sign-In対応、結局何をすればいいの？
Avatar for mitohato14 mitohato14
0
1.1k
JIS keyboard support in Omarchy
Avatar for LEF lef237
0
170

Featured

See All Featured
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
22k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
460
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
540
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
620
BBQ
Avatar for Matthew Crist matthewcrist
90
10k
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
6.2k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
470
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
900
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
1.1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.6k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
390

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