Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

CSS_Flex_基礎_.pdf

Avatar for darrenyaoyaoyao darrenyaoyaoyao
October 26, 2020
Programming
0
48

 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
54
Pug.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
65
Sass.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
53
jquery.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
66
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
53
bootstrap.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
75
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
89
Javascript_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
120
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
53

Other Decks in Programming

See All in Programming
著者と進める！『AIと個人開発したくなったらまずCursorで要件定義だ！』
Avatar for yasuna yasunacoffee
0
150
re:Invent 2025 のイケてるサービスを紹介する
Avatar for maroon1st maroon1st
0
140
Integrating WordPress and Symfony
Avatar for Alexandre Salomé alexandresalome
0
160
UIデザインに役立つ 2025年の最新CSS / The Latest CSS for UI Design 2025
Avatar for IKEDA Yasunobu clockmaker
18
7.6k
組み合わせ爆発にのまれない - 責務分割 x テスト
Avatar for HAL halhorn
1
150
俺流レスポンシブコーディング 2025
Avatar for TAK tak_dcxi
14
9k
脳の「省エネモード」をデバッグする ～System 1（直感）と System 2（論理）の切り替え～
Avatar for HideyukiKitao panda728
PRO
0
110
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
Avatar for Manfred Steyer manfredsteyer
PRO
0
150
LT資料
Avatar for t3tra t3tra
5
920
宅宅自以為的浪漫：跟 AI 一起為自己辦的研討會寫一個售票系統
Avatar for 高見龍 eddie
0
510
20251212 AI 時代的 Legacy Code 營救術 2025 WebConf
Avatar for mouson(墨嗓) mouson
0
200
Rediscover the Console - SymfonyCon Amsterdam 2025
Avatar for Robin Chalas chalasr
2
180

Featured

See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.1k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
180
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
130
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
3k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
0
1.9k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.3k
Fireside Chat
Avatar for paigeccino paigeccino
41
3.8k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
0
180
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
550

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