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
150
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
30
Static Websites with Gulp & AWS
ksmandersen
0
120
Practical MVVM
ksmandersen
0
210
Practical Swift
ksmandersen
1
200
Introduction to CocoaLumberjack
ksmandersen
0
100
Other Decks in Programming
See All in Programming
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
4k
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
360
RailsGirls IZUMO スポンサーLT
16bitidol
0
180
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
820
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
440
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
100
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
510
Featured
See All Featured
Designing for Performance
lara
610
69k
Rails Girls Zürich Keynote
gr2m
95
14k
Writing Fast Ruby
sferik
628
62k
Optimizing for Happiness
mojombo
379
70k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Building Adaptive Systems
keathley
43
2.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Typedesign – Prime Four
hannesfritz
42
2.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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