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

CSS_Flex_基礎_.pdf

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for darrenyaoyaoyao darrenyaoyaoyao
October 26, 2020
Programming
70
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
78
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
80
bootstrap.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
95
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
100
Javascript_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
150
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
79

Other Decks in Programming

See All in Programming
LLM 101
Avatar for Leonardo YongUk Kim dalinaum
0
350
React Native에 현대적인 빌드 도구 더하기: Rollipop 구현기
Avatar for Geunhyeok LEE leegeunhyeok
0
170
HTML-in-Canvasで作る未来のWeb UI表現
Avatar for IKEDA Yasunobu clockmaker
5
6k
Performance Optimization With LLMs
Avatar for xLeitix xleitix
0
230
TanStack Vue Query と Pinia Colada から学ぶ非同期状態の型設計
Avatar for aoshi aoshi
0
440
Event is what happens
Avatar for MOROHASHI Kyosuke moro
2
2.1k
エージェントを使い続けるためのメタワーク / Meta-work for keeping using the agent
Avatar for r-kagaya rkaga
6
2k
コードで差別化できない時代の ソフトウェアエンジニアリング / Software Engineering in an Era Where Code Doesn’t Differentiate
Avatar for Naoki Kishida kishida
2
220
GraphQL の onError と Nullability のこれから
Avatar for Yosuke Kurami quramy
0
200
個人開発者よ、Honoを使え（おじさんver）
Avatar for tanahiro2010 tanahiro2010
2
290
No More NoSuchMethodError
Avatar for TATSUNO Yasuhiro exoego
1
120
そのデザイントークン、Flutterでも同じ見た目になりますか？
Avatar for nakamizu nakamizu
0
130

Featured

See All Featured
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
620
Abbi's Birthday
Avatar for Violet Bock coloredviolet
4
11k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
900
The Language of Interfaces
Avatar for Des Traynor destraynor
162
27k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
18k
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
4.5k
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
590
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
660
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.6k
Done Done
Avatar for chrislema chrislema
187
17k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
620

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