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
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
210
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
480
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
170
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
240
VS Code Update for GitHub Copilot
74th
2
630
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
710
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
4
6.5k
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
160
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
630
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
12
3.1k
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
BBQ
matthewcrist
89
9.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
How GitHub (no longer) Works
holman
314
140k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
810
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
52k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Site-Speed That Sticks
csswizardry
10
680
Stop Working from a Prison Cell
hatefulcrawdad
270
21k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
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