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

CSS_Flex_基礎_.pdf

darrenyaoyaoyao
October 26, 2020
Programming
0
39

 CSS_Flex_基礎_.pdf

darrenyaoyaoyao

October 26, 2020
Tweet

More Decks by darrenyaoyaoyao

See All by darrenyaoyaoyao
HTML__CSS_基礎二.pdf
darrenyaoyaoyao
0
49
Pug.pdf
darrenyaoyaoyao
0
54
Sass.pdf
darrenyaoyaoyao
0
50
jquery.pdf
darrenyaoyaoyao
1
55
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
darrenyaoyaoyao
0
44
bootstrap.pdf
darrenyaoyaoyao
1
68
Javasrcipt_基礎一.pdf
darrenyaoyaoyao
0
80
Javascript_基礎二.pdf
darrenyaoyaoyao
0
110
HTML__CSS_基礎_.pdf
darrenyaoyaoyao
0
48

Other Decks in Programming

See All in Programming
PHPのガベージコレクションを深掘りしよう
rinchoku
0
260
今から始めるCursor / Windsurf / Cline
kengo_hayano
0
110
Agentic Applications with Symfony
el_stoffel
1
170
The Weight of Data: Rethinking Cloud-Native Systems for the Age of AI
hollycummins
0
230
ミリしらMCP勉強会
watany
4
670
DomainException と Result 型で作る型安全なエラーハンドリング
karszawa
0
840
Chrome Extension Techniques from Hell
moznion
1
100
体得しよう！RSA暗号の原理と解読
laysakura
3
550
家族・子育て重視/沖縄在住を維持しながらエンジニアとしてのキャリアをどのように育てていくか？
ug
0
260
PHPでお金を扱う時、終わりのない 謎の1円調査の旅にでなくて済む方法
nakka
4
1.4k
複雑なフォームと複雑な状態管理にどう向き合うか / #newt_techtalk vol. 15
izumin5210
4
3.7k
アーキテクトと美学 / Architecture and Aesthetics
nrslib
12
3.2k

Featured

See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
7
620
Visualization
eitanlees
146
16k
Automating Front-end Workflow
addyosmani
1369
200k
The Language of Interfaces
destraynor
157
24k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
Fireside Chat
paigeccino
37
3.4k
We Have a Design System, Now What?
morganepeng
51
7.5k
Why Our Code Smells
bkeepers
PRO
336
57k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Unsuck your backbone
ammeep
670
57k
The Invisible Side of Design
smashingmag
299
50k

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