Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS_Flex_基礎_.pdf
Search
darrenyaoyaoyao
October 26, 2020
Programming
0
38
CSS_Flex_基礎_.pdf
darrenyaoyaoyao
October 26, 2020
Tweet
Share
More Decks by darrenyaoyaoyao
See All by darrenyaoyaoyao
HTML__CSS_基礎二.pdf
darrenyaoyaoyao
0
40
Pug.pdf
darrenyaoyaoyao
0
50
Sass.pdf
darrenyaoyaoyao
0
46
jquery.pdf
darrenyaoyaoyao
1
50
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
darrenyaoyaoyao
0
42
bootstrap.pdf
darrenyaoyaoyao
1
58
Javasrcipt_基礎一.pdf
darrenyaoyaoyao
0
78
Javascript_基礎二.pdf
darrenyaoyaoyao
0
100
HTML__CSS_基礎_.pdf
darrenyaoyaoyao
0
46
Other Decks in Programming
See All in Programming
Hono・Prisma・AWSでGeoなAPI開発
nokonoko1203
5
680
オートマトン学習しろ / Do automata learning
makenowjust
3
130
2024 컴포즈 정원사
jisungbin
0
150
RAGの回答精度評価用のQAデータセットを生成AIに作らせた話
kurahara
0
250
Some more adventure of Happy Eyeballs
coe401_
2
190
What you can do with Ruby on WebAssembly
kateinoigakukun
0
170
watsonx.ai Dojo #2 生成AIを使ったアプリ開発入門編
oniak3ibm
PRO
0
180
Increased Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
380
GraphQL あるいは React における自律的なデータ取得について
quramy
11
3k
React + TextAliveでカッコいいLyric Applicatioinを作ろう!!
tosuri13
0
400
意外とフォントが大事だった話 / Font Issues on Internationalization
fumi23
0
110
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
120
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.8k
The Mythical Team-Month
searls
218
43k
How to Think Like a Performance Engineer
csswizardry
16
960
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
23
1.7k
Unsuck your backbone
ammeep
667
57k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
25
3.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
43
2k
Designing with Data
zakiwarfel
98
5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
120
Building Adaptive Systems
keathley
36
2.1k
Web development in the modern age
philhawksworth
205
10k
Optimising Largest Contentful Paint
csswizardry
31
2.8k
Transcript
CSS Flex 盒⼦模型 基礎⼀ 排版進階練習
在 slidepin.cc 儲存這份投影片
今⽇⽬標 https://darrenyaoyao.github.io/
https://darrenyaoyao.github.io/
Flex Flex 是⼀套排版系統 display: flex
Flex-direction column row
Flex 比例 flex: 1 flex: 3
Flex 比例 flex: 1 flex: 3
align-items
position: fixed 固定位置
Overscroll 超出範圍,滑動屬性
Icon Icon 使⽤ <link rel="stylesheet" href=“https:// fonts.googleapis.com/icon? family=Material+Icons">
justify-content
練習⼀ 將左邊的 Youtube menu 還原
flex-wrap
flex flex 其實是 flex: flex-grow flex-shrink flex-basis
flex-grow 元件的伸展性,是⼀個數值,當空間分配還有剩餘時的 當前元件的伸展性,預設值為,如果設置為 0 則不會 縮放。
flex-shrink 元件的收縮性: 元件的伸展性,是⼀個數值,當空間分 配還不⾜時的當前元件的收縮性,預設值為 0 ,如果設 置為 0 則不會縮放。
flex-basis 元件的基準值,可使⽤不同的單位值。
flex flex : 1 其實是指 flex-grow : 1