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
Flexbox all the things
Search
Kristian Andersen
October 28, 2015
Programming
2
140
Flexbox all the things
Kristian Andersen
October 28, 2015
Tweet
Share
More Decks by Kristian Andersen
See All by Kristian Andersen
Isomorphic Web Apps with React
ksmandersen
0
27
Static Websites with Gulp & AWS
ksmandersen
0
120
Practical MVVM
ksmandersen
0
210
Practical Swift
ksmandersen
1
200
Introduction to CocoaLumberjack
ksmandersen
0
98
Other Decks in Programming
See All in Programming
Fast JSX: Don't clone props object #28768
yossydev
1
150
Elm 0.19.0 Changes
bkuhlmann
0
490
Snowflakeで眠ったデータを起こそう!
estie
0
130
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
380
Anthropic Cookbook のおすすめレシピ
schroneko
7
1.1k
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
3
310
使ってみよう Azure AI Document Intelligence
kosmosebi
2
350
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
300
Polars入門
daikikatsuragawa
1
160
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
560
Ruby Pattern Matching
bkuhlmann
0
930
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Designing the Hi-DPI Web
ddemaree
276
33k
How to name files
jennybc
65
93k
Typedesign – Prime Four
hannesfritz
36
2.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
79
43k
BBQ
matthewcrist
80
8.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
Web Components: a chance to create the future
zenorocha
306
41k
For a Future-Friendly Web
brad_frost
172
9k
Visualization
eitanlees
137
14k
Designing for humans not robots
tammielis
248
25k
Transcript
FLEXBOX ALL THE THINGS
Clearfix <div class="items"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div
class="clearfix"></div> </div>
Clearfix v2 .clearfix:after { content: ""; display: table; clear: both;
}
Q: Why did the web designer drown? A: She didn’t
know if she should float:left or float:right.
display: flex;
W3C CSS Flexible Box Layout Module Level 1 3rd rev,
September 2012
None
Gracefull degeration & Fallbacks → Polyfill with Flexie (Flexie, still
old syntax) → New Polyfill in the works (Reflexie) → Fallback to float's
Let's get started
Concepts → Flex Containers → Flex Items
Flex Containers display: flex; display: inline-flex;
Flex Lines Items are positioned along a line inside a
flex container
Container Properties
Flex Direction flex-direction: row;
Flex Direction flex-direction: row-reverse;
Flex Direction flex-direction: column;
Flex Wrap flex-wrap: nowrap; flex-wrap: wrap;
Justify content Align items in the main axis
Justify content justify-content: flex-start; justify-content: flex-end;
Justify content justify-content: center;
Justify content justify-content: space-between; justify-content: space-around;
Align items Aligning items in the cross axis
Align items align-items: stretch; align-items: center;
Align items align-items: flex-start; align-items: flex-end;
Align items align-items: baseline;
Align content Align lines within a flex container
Align content
Align content
Align content
Item Properties
Flex Grow
Flex Shrink
Align self
Flex shorthand flex: none | auto | [ <flex-grow> <flex-shrink>?
|| <flex-basis> ];
Let's try it out!
None