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
50

 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
58
Pug.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
70
Sass.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
56
jquery.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
70
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
58
bootstrap.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
78
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
91
Javascript_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
130
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
58

Other Decks in Programming

See All in Programming
CDIの誤解しがちな仕様とその対処TIPS
Avatar for futokiyo futokiyo
0
160
Go 1.26でのsliceのメモリアロケーション最適化 / Go 1.26 リリースパーティ #go126party
Avatar for mazrean mazrean
1
330
Go Conference mini in Sendai 2026 : Goに新機能を提案し実装されるまでのフロー徹底解説
Avatar for Takahito Yamatoya yamatoya
0
510
New in Go 1.26 Implementing go fix in product development
Avatar for sunecosuri sunecosuri
0
310
Go1.26 go fixをプロダクトに適用して困ったこと
Avatar for Hiroki Kurasawa kurakura0916
0
320
Geminiの機能を調べ尽くしてみた
Avatar for yosshi naruyoshimi
0
190
CSC307 Lecture 14
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
450
API Platformを活用したPHPによる本格的なWeb API開発 / api-platform-book-intro
Avatar for Takashi Kanemoto ttskch
1
120
「ブロックテーマでは再現できない」は本当か？
Avatar for Takashi Kitajima inc2734
0
1.1k
Claude Code の Skill で複雑な既存仕様をすっきり整理しよう
Avatar for yuichiro_takahashi yuichirokato
1
270
Takumiから考えるSecurity_Maturity_Model.pdf
Avatar for gessy0129 gessy0129
1
110
Ruby x Terminal
Avatar for Akira Matsuda a_matsuda
5
570

Featured

See All Featured
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
280
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
770
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
170
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
68
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.8k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.3k

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