Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

CSS_Flex_基礎_.pdf

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
76
Pug.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
96
Sass.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
79
jquery.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
110
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
78
bootstrap.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
94
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
100
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
設計次第でAIコードの読む量は減らせる / designing-for-code-reading
Avatar for MinoDriven minodriven
34
16k
ジョジョの世界をXRで再現する
Avatar for mofurune mofurune
0
140
WebRTC映像をAirPlayに対応させる挑戦.pdf
Avatar for monolithic-adam monolithic_adam
0
350
mrbgem 三角測量 開発
Avatar for ogom ogom
0
220
Embedded Swiftで作る自作USBデバイス によるiOSデバイスの自動テスト / iOSDC Japan 2026 glassfiber
Avatar for glassfiber glassfiber
0
310
動作中のプログラムの中身をリアルタイムに覗く / Realtime Debugger for CSharp with Roslyn
Avatar for Prota prota
1
1.8k
すこし踏み込む CancellationToken
Avatar for tkym htkym
2
1.7k
Rでドレミ/Do-Re-Mi_with_R
Avatar for florets1 florets1
0
130
難しいけど、読めた。- OSSの入口に立った話。
Avatar for shota sts11142
0
140
AWS CDKのカスタムリソースでContinuum（旧Security Agent）を実装した話 | Implementing Continuum (formerly Security Agent) via AWS CDK Custom Resource
Avatar for アキキー | Akihisa Ikeda akihisaikeda
2
140
半永久的に提供し続けられるプライベートクラウドを目指して ― 利用者の認知負荷を抑えるAPI抽象化とハードウェア世代交代の基盤設計
Avatar for Tomofumi Kondo tomokon
0
470
SREの越境 / SRE Collaboration
Avatar for y-ohgi y0hgi
2
300

Featured

See All Featured
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.4k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
32k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.4k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.8k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
7k
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
490
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.6k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.5k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
27k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.8k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k

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