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
48
jquery.pdf
darrenyaoyaoyao
1
52
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
darrenyaoyaoyao
0
42
bootstrap.pdf
darrenyaoyaoyao
1
65
Javasrcipt_基礎一.pdf
darrenyaoyaoyao
0
78
Javascript_基礎二.pdf
darrenyaoyaoyao
0
110
HTML__CSS_基礎_.pdf
darrenyaoyaoyao
0
46

Other Decks in Programming

See All in Programming
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
200
Amazon Bedrock Multi Agentsを試してきた
tm2
1
280
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
テストをしないQAエンジニアは何をしているか？
nealle
0
130
Conform を推す - Advocating for Conform
mizoguchicoji
3
680
【PHP】 破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
120
JavaScriptツール群「UnJS」を5分で一気に駆け巡る！
k1tikurisu
10
1.8k
Lottieアニメーションをカスタマイズしてみた
tahia910
0
120
時計仕掛けのCompose
mkeeda
1
280
技術を根付かせる / How to make technology take root
kubode
1
240
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
7
2.5k

Featured

See All Featured
YesSQL, Process and Tooling at Scale
rocio
171
14k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
For a Future-Friendly Web
brad_frost
176
9.5k
Being A Developer After 40
akosma
89
590k
Building Adaptive Systems
keathley
40
2.4k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
38
7.1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Designing for humans not robots
tammielis
250
25k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Docker and Python
trallard
44
3.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.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