SlideShare a Scribd company logo

Flexbox: One Giant Leap for Web Layout (CSS Day 2013)

Stephen Hay, profile picture
Stephen Hay

My presentation for CSS Day 2013. Browser compatibility slide has been omitted; please check caniuse.com for Flexbox compatibility. Please note that these slides are actually screenshots of a web page I made for the presentation, combined into a PDF to post here; thus, no plain text transcript.

Design
Related topics:
Web Design and Development
1 of 47
Downloaded 16 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)

More Related Content

PDF
The Benefits of Face-to-Face Communication
BlueJeans Network
 
PDF
7 Must-Know Video Conferencing Stats
PGi
 
PDF
Sassconf maps
Lourdes Montano
 
PDF
Sculpting Text: Easing the Pain of Designing in the Browser
Stephen Hay
 
PDF
The Future of Everything
Charbel Zeaiter
 
PPTX
WTF - Why the Future Is Up to Us - pptx version
Tim O'Reilly
 
PDF
From Deception to Clarity
Stephen Hay
 
PDF
The Backside of the Class (CSS Day 2015)
Stephen Hay
 
The Benefits of Face-to-Face Communication
BlueJeans Network
 
7 Must-Know Video Conferencing Stats
PGi
 
Sassconf maps
Lourdes Montano
 
Sculpting Text: Easing the Pain of Designing in the Browser
Stephen Hay
 
The Future of Everything
Charbel Zeaiter
 
WTF - Why the Future Is Up to Us - pptx version
Tim O'Reilly
 
From Deception to Clarity
Stephen Hay
 
The Backside of the Class (CSS Day 2015)
Stephen Hay
 

More from Stephen Hay (20)

PDF
The Art of Deception
Stephen Hay
 
PDF
Power Tools For Browser-Based Design
Stephen Hay
 
PDF
UIE Virtual Seminar: Responsive Web Design Workflow
Stephen Hay
 
PDF
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Stephen Hay
 
PDF
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Stephen Hay
 
PDF
The New Photoshop, Part 2: The Revenge of the Web (FEC13)
Stephen Hay
 
PDF
The New Photoshop, Part 2: The Revenge of the Web
Stephen Hay
 
PDF
Style Guides Are The New Photoshop (Smashing Conference 2012)
Stephen Hay
 
PDF
Style Guides Are The New Photoshop (Fronteers 2012)
Stephen Hay
 
PDF
Responsive Design Workflow: Webshaped 2012
Stephen Hay
 
PDF
Responsive Design Workflow: Mobilism 2012
Stephen Hay
 
PDF
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Stephen Hay
 
PDF
Go With The Flow
Stephen Hay
 
PDF
Fronteers Workshop: Rabid Prototyping
Stephen Hay
 
PDF
Meta layout: a closer look at media queries
Stephen Hay
 
PDF
Real-world Responsive Design @ Breaking Development 2011
Stephen Hay
 
PDF
HTML5 & Webrichtlijnen 2
Stephen Hay
 
PDF
Real-world Responsive Design
Stephen Hay
 
PDF
De aanvrager wint
Stephen Hay
 
PDF
The Future State of Layout
Stephen Hay
 
The Art of Deception
Stephen Hay
 
Power Tools For Browser-Based Design
Stephen Hay
 
UIE Virtual Seminar: Responsive Web Design Workflow
Stephen Hay
 
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Stephen Hay
 
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Stephen Hay
 
The New Photoshop, Part 2: The Revenge of the Web (FEC13)
Stephen Hay
 
The New Photoshop, Part 2: The Revenge of the Web
Stephen Hay
 
Style Guides Are The New Photoshop (Smashing Conference 2012)
Stephen Hay
 
Style Guides Are The New Photoshop (Fronteers 2012)
Stephen Hay
 
Responsive Design Workflow: Webshaped 2012
Stephen Hay
 
Responsive Design Workflow: Mobilism 2012
Stephen Hay
 
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Stephen Hay
 
Go With The Flow
Stephen Hay
 
Fronteers Workshop: Rabid Prototyping
Stephen Hay
 
Meta layout: a closer look at media queries
Stephen Hay
 
Real-world Responsive Design @ Breaking Development 2011
Stephen Hay
 
HTML5 & Webrichtlijnen 2
Stephen Hay
 
Real-world Responsive Design
Stephen Hay
 
De aanvrager wint
Stephen Hay
 
The Future State of Layout
Stephen Hay
 
Ad

Recently uploaded (20)

PDF
Benefits_of_Cast_Aluminium_Doors_Presentation.pdf
Royal Matrixs
 
PPTX
building Planning Overview for step wise design.pptx
SamuelJohnson540488
 
PDF
BRANDBOOK-Presidential Award Scheme-Kenya-2023
sejo2001
 
PPTX
artificialintelligencedata driven analytics23.pptx
revathi148366
 
PDF
Quality Control Management for RMG, Level- 4, Certificate
Mohammad Anamul Haque Nayan
 
PDF
UNIT 1 Introduction fnfbbfhfhfbdhdbdto Java.pptx.pdf
yash131101123110
 
PPTX
Special finishes, classification and types, explanation
SANGEETHA PRIYA B
 
PPTX
Implications Existing phase plan and its feasibility.pptx
SamuelJohnson540488
 
PPTX
AC-Unit1.pptx CRYPTOGRAPHIC NNNNFOR ALL
prabujayant2022
 
PPT
EGWHermeneuticsffgggggggggggggggggggggggggggggggg.ppt
simonkahinga
 
PDF
Emailing DDDX-MBCaEiB.pdf DDD_Europe_2022_Intro_to_Context_Mapping_pdf-165590...
PrathikT1
 
PDF
YOW2022-BNE-MinimalViableArchitecture.pdf
PrathikT1
 
PPT
Package Design Design Kit 20100009 PWM IC by Bee Technologies
Tsuyoshi Horigome
 
PPT
pump pump is a mechanism that is used to transfer a liquid from one place to ...
gunjankolhezn
 
PPT
UNIT I- Yarn, types, explanation, process
SANGEETHA PRIYA B
 
PDF
Trusted Executive Protection Services in Ontario — Discreet & Professional.pdf
secureshields25
 
PDF
SEVA- Fashion designing-Presentation.pdf
Maya243315
 
PPTX
Causes of Flooding by Slidesgo sdnl;asnjdl;asj.pptx
renrif6047
 
PPTX
6- Architecture design complete (1).pptx
aroojkazmi006
 
PPTX
Tenders & Contracts Works _ Services Afzal.pptx
navilasatheesh
 
Benefits_of_Cast_Aluminium_Doors_Presentation.pdf
Royal Matrixs
 
building Planning Overview for step wise design.pptx
SamuelJohnson540488
 
BRANDBOOK-Presidential Award Scheme-Kenya-2023
sejo2001
 
artificialintelligencedata driven analytics23.pptx
revathi148366
 
Quality Control Management for RMG, Level- 4, Certificate
Mohammad Anamul Haque Nayan
 
UNIT 1 Introduction fnfbbfhfhfbdhdbdto Java.pptx.pdf
yash131101123110
 
Special finishes, classification and types, explanation
SANGEETHA PRIYA B
 
Implications Existing phase plan and its feasibility.pptx
SamuelJohnson540488
 
AC-Unit1.pptx CRYPTOGRAPHIC NNNNFOR ALL
prabujayant2022
 
EGWHermeneuticsffgggggggggggggggggggggggggggggggg.ppt
simonkahinga
 
Emailing DDDX-MBCaEiB.pdf DDD_Europe_2022_Intro_to_Context_Mapping_pdf-165590...
PrathikT1
 
YOW2022-BNE-MinimalViableArchitecture.pdf
PrathikT1
 
Package Design Design Kit 20100009 PWM IC by Bee Technologies
Tsuyoshi Horigome
 
pump pump is a mechanism that is used to transfer a liquid from one place to ...
gunjankolhezn
 
UNIT I- Yarn, types, explanation, process
SANGEETHA PRIYA B
 
Trusted Executive Protection Services in Ontario — Discreet & Professional.pdf
secureshields25
 
SEVA- Fashion designing-Presentation.pdf
Maya243315
 
Causes of Flooding by Slidesgo sdnl;asnjdl;asj.pptx
renrif6047
 
6- Architecture design complete (1).pptx
aroojkazmi006
 
Tenders & Contracts Works _ Services Afzal.pptx
navilasatheesh
 
Ad