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
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
150
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
170
C++20 射影変換
faithandbrave
0
540
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
420
技術同人誌をMCP Serverにしてみた
74th
1
380
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
1
120
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
520
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
240
エラーって何種類あるの?
kajitack
5
310
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
230
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
490
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
270
Featured
See All Featured
Bash Introduction
62gerente
614
210k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Rails Girls Zürich Keynote
gr2m
94
14k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
How to train your dragon (web standard)
notwaldorf
94
6.1k
The Language of Interfaces
destraynor
158
25k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.3k
Designing for humans not robots
tammielis
253
25k
Docker and Python
trallard
44
3.4k
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