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
69
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
73
Pug.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
89
Sass.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
73
jquery.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
100
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
75
bootstrap.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
92
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
99
Javascript_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
150
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
77

Other Decks in Programming

See All in Programming
ALB ログから Trace を気合で繋げる技術
Avatar for Hayato Kawai fohte
7
890
AIエージェント時代のコードレビューを設計する
Avatar for nogu nogu66
6
2.7k
信頼性の目標を誰も求めてない
Avatar for Shuma shubox
0
510
AgentCore CLI で進化した AWS での AI エージェントの作り方 : 必要な機能を必要な時に
Avatar for Takahiro Kubo icoxfog417
PRO
3
330
Vibes Containers 〜AIで変わるコンテナ設計と運用〜
Avatar for Tetsuya Kikuchi tkikuc
3
530
AI × TiDD / 2026.09.05 Redmine 大阪
Avatar for tokudiro tokudiro
1
140
LoopHub - ローカルで動く GitHub で、AI と共同開発
Avatar for jugyo jugyo
1
540
RSSとCodexを使ってX投稿自動化してみた
Avatar for Ochtum ochtum
0
110
Building an Out-of-Order CPU
Avatar for Latte72 latte72
1
760
AIとGame Jamで、ゲームを完成させた話
Avatar for hiro takahirosaeki
0
120
『寄り添うラジオ』をAIで作る 体験価値から逆算した、会話しないUXと品質設計
Avatar for テオリア・テクノロジーズ theoriatec2024
3
160
テストを司るデーモンに会いに行く 〜隔離した仮想マシンでテストを通すまで〜
Avatar for Hidemune Takahashi h1d3mun3
1
210

Featured

See All Featured
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.7k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
480
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
500
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.4k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
390
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
520
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
280
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
12k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
10k

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