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
29
Static Websites with Gulp & AWS
ksmandersen
0
120
Practical MVVM
ksmandersen
0
210
Practical Swift
ksmandersen
1
200
Introduction to CocoaLumberjack
ksmandersen
0
98
Other Decks in Programming
See All in Programming
Dev ContainersとGitHub Codespacesの素敵な関係
ymd65536
1
130
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
350
僕がつくった48個のWebサービス達
yusukebe
18
17k
C#/.NETのこれまでのふりかえり
tomokusaba
1
160
ECSのサービス間通信 4つの方法を比較する 〜Canary,Blue/Greenも添えて〜
tkikuc
11
2.3k
Vue3の一歩踏み込んだパフォーマンスチューニング2024
hal_spidernight
3
3.1k
Server Driven Compose With Firebase
skydoves
0
400
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
170
LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について
layerx
PRO
2
140
色々なIaCツールを実際に触って比較してみる
iriikeita
0
280
Identifying User Idenity
moro
6
8k
リリース8年目のサービスの1800個のERBファイルをViewComponentに移行した方法とその結果
katty0324
5
3.6k
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
363
19k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
Facilitating Awesome Meetings
lara
49
6k
For a Future-Friendly Web
brad_frost
175
9.4k
Designing Experiences People Love
moore
138
23k
[RailsConf 2023] Rails as a piece of cake
palkan
51
4.9k
Typedesign – Prime Four
hannesfritz
39
2.4k
Scaling GitHub
holman
458
140k
How GitHub (no longer) Works
holman
311
140k
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