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
42
Pug.pdf
darrenyaoyaoyao
0
50
Sass.pdf
darrenyaoyaoyao
0
47
jquery.pdf
darrenyaoyaoyao
1
51
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
darrenyaoyaoyao
0
42
bootstrap.pdf
darrenyaoyaoyao
1
63
Javasrcipt_基礎一.pdf
darrenyaoyaoyao
0
78
Javascript_基礎二.pdf
darrenyaoyaoyao
0
110
HTML__CSS_基礎_.pdf
darrenyaoyaoyao
0
46
Other Decks in Programming
See All in Programming
僕がつくった48個のWebサービス達
yusukebe
18
17k
のびしろを広げる巻き込まれ力:偶然を活かすキャリアの作り方/oso2024
takahashiikki
1
410
Importmapを使ったJavaScriptの 読み込みとブラウザアドオンの影響
swamp09
4
1.2k
飲食業界向けマルチプロダクトを実現させる開発体制とリアルな現状
hiroya0601
1
390
WEBエンジニア向けAI活用入門
sutetotanuki
0
300
Tuning GraphQL on Rails
pyama86
2
1k
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
150
Synchronizationを支える技術
s_shimotori
1
150
詳細解説! ArrayListの仕組みと実装
yujisoftware
0
480
LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について
layerx
PRO
2
140
役立つログに取り組もう
irof
26
8.7k
gopls を改造したら開発生産性が高まった
satorunooshie
8
240
Featured
See All Featured
Become a Pro
speakerdeck
PRO
24
5k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Building Applications with DynamoDB
mza
90
6.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Documentation Writing (for coders)
carmenintech
65
4.4k
Measuring & Analyzing Core Web Vitals
bluesmoon
1
40
Thoughts on Productivity
jonyablonski
67
4.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
Gamification - CAS2011
davidbonilla
80
5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
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