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
36
Static Websites with Gulp & AWS
ksmandersen
0
130
Practical MVVM
ksmandersen
0
210
Practical Swift
ksmandersen
1
200
Introduction to CocoaLumberjack
ksmandersen
0
110
Other Decks in Programming
See All in Programming
AIのバカさ加減に怒る前にやっておくこと
blueeventhorizon
0
110
SODA - FACT BOOK(JP)
sodainc
1
8.9k
Amazon Verified Permissions実践入門 〜Cedar活用とAppSync導入事例/Practical Introduction to Amazon Verified Permissions
fossamagna
2
100
Software Architecture
hschwentner
6
2.3k
CSC305 Lecture 09
javiergs
PRO
0
320
技術的負債の正体を知って向き合う
irof
0
270
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
440
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
140
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.2k
Towards Transactional Buffering of CDC Events @ Flink Forward 2025 Barcelona Spain
hpgrahsl
0
120
CSC509 Lecture 08
javiergs
PRO
0
260
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
260
Featured
See All Featured
Being A Developer After 40
akosma
91
590k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
2.9k
Facilitating Awesome Meetings
lara
57
6.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Fireside Chat
paigeccino
41
3.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
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