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
45
CSS_Flex_基礎_.pdf
darrenyaoyaoyao
October 26, 2020
Tweet
Share
More Decks by darrenyaoyaoyao
See All by darrenyaoyaoyao
HTML__CSS_基礎二.pdf
darrenyaoyaoyao
0
52
Pug.pdf
darrenyaoyaoyao
0
59
Sass.pdf
darrenyaoyaoyao
0
52
jquery.pdf
darrenyaoyaoyao
1
59
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
darrenyaoyaoyao
0
49
bootstrap.pdf
darrenyaoyaoyao
1
74
Javasrcipt_基礎一.pdf
darrenyaoyaoyao
0
87
Javascript_基礎二.pdf
darrenyaoyaoyao
0
120
HTML__CSS_基礎_.pdf
darrenyaoyaoyao
0
51
Other Decks in Programming
See All in Programming
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.2k
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
920
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
210
Devvox Belgium - Agentic AI Patterns
kdubois
1
150
ドメイン駆動設計のエッセンス
masuda220
PRO
14
5.6k
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
260
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
aoseyuu
2
760
Temporal Knowledge Graphで作る! 時間変化するナレッジを扱うAI Agentの世界
po3rin
3
770
Developer Joy - The New Paradigm
hollycummins
1
370
なんでRustの環境構築してないのにRust製のツールが動くの? / Why Do Rust-Based Tools Run Without a Rust Environment?
ssssota
14
47k
ALL CODE BASE ARE BELONG TO STUDY
uzulla
28
6.8k
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
650
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Rails Girls Zürich Keynote
gr2m
95
14k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
KATA
mclloyd
PRO
32
15k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
Practical Orchestrator
shlominoach
190
11k
Thoughts on Productivity
jonyablonski
71
4.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
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