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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
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
37
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
360° Signals in Angular: Signal Forms with SignalStore & Resources @ngLondon 01/2026
manfredsteyer
PRO
0
110
15年続くIoTサービスのSREエンジニアが挑む分散トレーシング導入
melonps
2
170
QAフローを最適化し、品質水準を満たしながらリリースまでの期間を最短化する #RSGT2026
shibayu36
2
4.3k
AgentCoreとHuman in the Loop
har1101
5
220
そのAIレビュー、レビューしてますか? / Are you reviewing those AI reviews?
rkaga
6
4.5k
LLM Observabilityによる 対話型音声AIアプリケーションの安定運用
gekko0114
2
420
登壇資料を作る時に意識していること #登壇資料_findy
konifar
4
930
Basic Architectures
denyspoltorak
0
660
なぜSQLはAIぽく見えるのか/why does SQL look AI like
florets1
0
440
CSC307 Lecture 06
javiergs
PRO
0
680
SourceGeneratorのススメ
htkym
0
190
HTTPプロトコル正しく理解していますか? 〜かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ニャ〜
hekuchan
2
680
Featured
See All Featured
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
baasie
0
220
Fireside Chat
paigeccino
41
3.8k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
170
Jess Joyce - The Pitfalls of Following Frameworks
techseoconnect
PRO
1
63
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
2k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
uxyall
0
290
Heart Work Chapter 1 - Part 1
lfama
PRO
5
35k
AI Search: Where Are We & What Can We Do About It?
aleyda
0
6.9k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
greggifford
PRO
0
76
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
61k
The agentic SEO stack - context over prompts
schlessera
0
630
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
mfonobong
2
280
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