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

CSS_Flex_基礎_.pdf

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for darrenyaoyaoyao darrenyaoyaoyao
October 26, 2020
Programming
0
49

 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
57
Pug.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
69
Sass.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
55
jquery.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
69
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
55
bootstrap.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
76
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
90
Javascript_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
120
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
57

Other Decks in Programming

See All in Programming
そのAIレビュー、レビューしてますか？ / Are you reviewing those AI reviews?
Avatar for r-kagaya rkaga
6
4.6k
Architectural Extensions
Avatar for Denys Poltorak denyspoltorak
0
290
AIによる高速開発をどう制御するか？ ガードレール設置で開発速度と品質を両立させたチームの事例
Avatar for tonkotsuboy_com tonkotsuboy_com
7
2.4k
OSSとなったswift-buildで Xcodeのビルドを差し替えられるため 自分でXcodeを直せる時代になっている ダイアモンド問題編
Avatar for yimajo yimajo
3
620
Apache Iceberg V3 and migration to V3
Avatar for Tomohiro Tanaka tomtanaka
0
160
AIエージェント、”どう作るか”で差は出るか？ / AI Agents: Does the "How" Make a Difference?
Avatar for r-kagaya rkaga
4
2k
QAフローを最適化し、品質水準を満たしながらリリースまでの期間を最短化する #RSGT2026
Avatar for shibayu36 shibayu36
2
4.4k
AI Schema Enrichment for your Oracle AI Database
Avatar for thatjeffsmith thatjeffsmith
0
300
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる！
Avatar for とすり tosuri13
1
180
SourceGeneratorのススメ
Avatar for tkym htkym
0
200
AIによる開発の民主化を支える コンテキスト管理のこれまでとこれから
Avatar for Mulyu mulyu
3
340
Package Management Learnings from Homebrew
Avatar for Mike McQuaid mikemcquaid
0
230

Featured

See All Featured
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
1
1.4k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
0
2.3k
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
120
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
300
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
500
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
220
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
750
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.5k
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
61
52k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.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