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

CSS_Flex_基礎_.pdf

darrenyaoyaoyao
October 26, 2020
Programming
0
38

 CSS_Flex_基礎_.pdf

darrenyaoyaoyao

October 26, 2020
Tweet

More Decks by darrenyaoyaoyao

See All by darrenyaoyaoyao
HTML__CSS_基礎二.pdf
darrenyaoyaoyao
0
46
Pug.pdf
darrenyaoyaoyao
0
52
Sass.pdf
darrenyaoyaoyao
0
47
jquery.pdf
darrenyaoyaoyao
1
52
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
darrenyaoyaoyao
0
42
bootstrap.pdf
darrenyaoyaoyao
1
64
Javasrcipt_基礎一.pdf
darrenyaoyaoyao
0
78
Javascript_基礎二.pdf
darrenyaoyaoyao
0
110
HTML__CSS_基礎_.pdf
darrenyaoyaoyao
0
46

Other Decks in Programming

See All in Programming
これでLambdaが不要に？！Step FunctionsのJSONata対応について
iwatatomoya
2
3.7k
ChatGPT とつくる PHP で OS 実装
memory1994
PRO
2
110
良いユニットテストを書こう
mototakatsu
8
2.7k
バグを見つけた？それAppleに直してもらおう！
uetyo
0
180
php-conference-japan-2024
tasuku43
0
320
数十万行のプロジェクトを Scala 2から3に完全移行した
xuwei_k
0
280
nekko cloudにおけるProxmox VE利用事例
irumaru
3
430
Monixと常駐プログラムの勘どころ / Scalaわいわい勉強会 #4
stoneream
0
280
fs2-io を試してたらバグを見つけて直した話
chencmd
0
240
見えないメモリを観測する: PHP 8.4 `pg_result_memory_size()` とSQL結果のメモリ管理
kentaroutakeda
0
390
선언형 UI에서의 상태관리
l2hyunwoo
0
180
range over funcの使い道と非同期N+1リゾルバーの夢 / about a range over func
mackee
0
110

Featured

See All Featured
Into the Great Unknown - MozCon
thekraken
33
1.5k
Building Your Own Lightsaber
phodgson
103
6.1k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
Code Review Best Practice
trishagee
65
17k
Facilitating Awesome Meetings
lara
50
6.1k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
Side Projects
sachag
452
42k
Designing Experiences People Love
moore
138
23k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.5k
Testing 201, or: Great Expectations
jmmastey
40
7.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