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
45
Pug.pdf
darrenyaoyaoyao
0
52
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
ペアーズにおけるAmazon Bedrockを⽤いた障害対応⽀援 ⽣成AIツールの導⼊事例 @ 20241115配信AWSウェビナー登壇
fukubaka0825
6
2k
Jakarta EE meets AI
ivargrimstad
0
640
watsonx.ai Dojo #4 生成AIを使ったアプリ開発、応用編
oniak3ibm
PRO
1
140
Amazon Qを使ってIaCを触ろう!
maruto
0
410
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
100
みんなでプロポーザルを書いてみた
yuriko1211
0
260
Duckdb-Wasmでローカルダッシュボードを作ってみた
nkforwork
0
130
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
340
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
10
1.3k
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
600
Remix on Hono on Cloudflare Workers
yusukebe
1
290
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
880
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
50
7.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Designing Experiences People Love
moore
138
23k
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