SlideShare a Scribd company logo
1 of 57
Download to read offline
Flexbox Layouts 
A proper layout tool for the web… Finally!
HTML layouts before 
display
HTML layouts before 
display 
block | inline | inline-block | table | inline-table
HTML layouts before 
position
HTML layouts before 
position 
relative | absolute | fixed | static
HTML layouts before 
float
HTML layouts before 
float 
left | right | none
HTML layouts before 
float 
left | right | none 
clear
HTML layouts before 
float 
left | right | none 
clear 
left | right | both | none
HTML layouts with Flexbox
HTML layouts with Flexbox 
flex container
HTML layouts with Flexbox 
flex container 
display: flex | inline-flex
HTML layouts with Flexbox 
flex container 
flex items
Flex Container 
flex-direction 
vertical horizontal
Flex Container 
flex-wrap 
wrap no-wrap
Flex Container 
justify-content: flex-start
Flex Container 
justify-content: flex-end
Flex Container 
justify-content: center
Flex Container 
justify-content: space-between
Flex Container 
justify-content: space-around
Flex Container 
align-items: flex-start
Flex Container 
align-items: flex-end
Flex Container 
align-items: center
Flex Container 
align-items: stretch
Flex Container 
align-items: baseline 
hola hi hey howdy
Flex Container 
align-content: flex-start
Flex Container 
align-content: flex-end
Flex Container 
align-content: center
Flex Container 
align-content: stretch
Flex Container 
align-content: space-between
Flex Container 
align-content: space-around
Flex Items 
order: 1
Flex Items 
order: 2
Flex Items 
order: 3
Flex Items 
flex-grow: 1
Flex Items 
flex-grow: 1
Flex Items 
flex-grow: 1
Flex Items 
flex-grow: 1
Flex Items 
flex-grow: 2
Flex Items 
flex-grow: 1
Flex Items 
flex-shrink: 1
Flex Items 
flex-shrink: 2
Flex Items 
flex-shrink: 1
Flex Items 
flex-basis: 20em
Flex Items 
flex: 2 1 50em
Flex Items 
flex: 2 1 50em 
flex-grow
Flex Items 
flex: 2 1 50em 
flex-shrink
Flex Items 
flex: 2 1 50em 
flex-basis
Flex Items 
align-self: flex-start 
align-self: flex-end
Internet Explorer 9 and below…
Internet Explorer 9 and below… 
Canada: 7.5% 
rapidly shrinking
So what do we do now?
So what do we do now? 
pureCSS grid module 
uses inline-block for <= IE9 
<div class="pure-g"> 
<div class="pure-u-1-3"><p>Thirds</p></div> 
<div class="pure-u-1-3"><p>Thirds</p></div> 
<div class="pure-u-1-3"><p>Thirds</p></div> 
</div> 
Works very well if 
you know how many 
columns
So what do we do now? 
pureCSS grid module 
uses inline-block for <= IE9 
<div class="pure-g"> 
<div class="pure-u-1-3"><p>Thirds</p></div> 
<div class="pure-u-1-3"><p>Thirds</p></div> 
<div class="pure-u-1-3"><p>Thirds</p></div> 
</div> 
jQuery insertAfter() 
re-order with javascript 
<div class=“order-3”> 
<div class=“order-1”> 
<div class=“order-2”> 
<div class=“order-3”> 
$(window).resize(function() { 
if ($(window).width() < 960) { 
$(“.order-3”).insertAfter( $(“.order-2”) );
So what do we do now? 
a { 
display: -webkit-box; 
display: -webkit-flex; 
display: -moz-box; 
display: -ms-flexbox; 
display: flex 
} 
a { 
display: flex; 
} 
Autoprefixer post-processor
Holy Grail Layout 
header, footer, three columns 
• Has a fluid center with fixed-width sidebars 
• Center column should appear first in the HTML 
• Columns should be the same height 
• Minimal markup 
• The footer should "stick" to the bottom of the page when content is sparse 
http://codepen.io/adamskye/pen/OPJKEP

More Related Content

What's hot

What's hot (11)

CSS Flexbox (flexible box layout)
CSS Flexbox (flexible box layout)CSS Flexbox (flexible box layout)
CSS Flexbox (flexible box layout)
 
Ridiculously Easy Layouts with Flexbox
Ridiculously Easy Layouts with FlexboxRidiculously Easy Layouts with Flexbox
Ridiculously Easy Layouts with Flexbox
 
Using Flexbox Today (Frontier Conf 2016)
Using Flexbox Today (Frontier Conf 2016)Using Flexbox Today (Frontier Conf 2016)
Using Flexbox Today (Frontier Conf 2016)
 
From Preprocessor to Postprocessor
From Preprocessor to PostprocessorFrom Preprocessor to Postprocessor
From Preprocessor to Postprocessor
 
Leveling Up With Flexbox (Smart Web Conference)
Leveling Up With Flexbox (Smart Web Conference)Leveling Up With Flexbox (Smart Web Conference)
Leveling Up With Flexbox (Smart Web Conference)
 
CSS3 Layout
CSS3 LayoutCSS3 Layout
CSS3 Layout
 
Using Flexbox Today (CSS Summit 2016)
Using Flexbox Today (CSS Summit 2016)Using Flexbox Today (CSS Summit 2016)
Using Flexbox Today (CSS Summit 2016)
 
Css floats
Css floatsCss floats
Css floats
 
Using Flexbox Today (Generate Sydney 2016)
Using Flexbox Today (Generate Sydney 2016)Using Flexbox Today (Generate Sydney 2016)
Using Flexbox Today (Generate Sydney 2016)
 
Perch, Patterns and Old Browsers
Perch, Patterns and Old BrowsersPerch, Patterns and Old Browsers
Perch, Patterns and Old Browsers
 
10 WordPress Theme Hacks to Improve Your Site
10 WordPress Theme Hacks to Improve Your Site10 WordPress Theme Hacks to Improve Your Site
10 WordPress Theme Hacks to Improve Your Site
 

Viewers also liked

separating content and layout, HTML CSS and some web history
separating content and layout, HTML CSS and some web historyseparating content and layout, HTML CSS and some web history
separating content and layout, HTML CSS and some web history
Lon Barfield
 
решение основной проблемы Agile (scrum) проектов в контексте ba
решение основной проблемы Agile (scrum) проектов в контексте baрешение основной проблемы Agile (scrum) проектов в контексте ba
решение основной проблемы Agile (scrum) проектов в контексте ba
ISsoft
 
Css part2
Css part2Css part2
Css part2
ISsoft
 
Тестирование требований
Тестирование требованийТестирование требований
Тестирование требований
ISsoft
 
CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)
Zoe Gillenwater
 

Viewers also liked (16)

The Power of CSS Flexbox
The Power of CSS FlexboxThe Power of CSS Flexbox
The Power of CSS Flexbox
 
separating content and layout, HTML CSS and some web history
separating content and layout, HTML CSS and some web historyseparating content and layout, HTML CSS and some web history
separating content and layout, HTML CSS and some web history
 
1st Portfolio Development Idea: Photographer's Portfolio Website Layout
1st Portfolio Development Idea: Photographer's Portfolio Website Layout1st Portfolio Development Idea: Photographer's Portfolio Website Layout
1st Portfolio Development Idea: Photographer's Portfolio Website Layout
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
 
Webdesign Gestaltungsgrundlagen für Nicht-Designer, Normales und Entwickler
Webdesign Gestaltungsgrundlagen für Nicht-Designer, Normales und EntwicklerWebdesign Gestaltungsgrundlagen für Nicht-Designer, Normales und Entwickler
Webdesign Gestaltungsgrundlagen für Nicht-Designer, Normales und Entwickler
 
Flexbox and Grid Layout: How you will structure layouts tomorrow.
Flexbox and Grid Layout: How you will structure layouts tomorrow.Flexbox and Grid Layout: How you will structure layouts tomorrow.
Flexbox and Grid Layout: How you will structure layouts tomorrow.
 
Box Model
Box ModelBox Model
Box Model
 
How Joomla Works
How Joomla WorksHow Joomla Works
How Joomla Works
 
FL Blog Con 2015: How To Find The Best WordPress Plugins For You
FL Blog Con 2015: How To Find The Best WordPress Plugins For YouFL Blog Con 2015: How To Find The Best WordPress Plugins For You
FL Blog Con 2015: How To Find The Best WordPress Plugins For You
 
решение основной проблемы Agile (scrum) проектов в контексте ba
решение основной проблемы Agile (scrum) проектов в контексте baрешение основной проблемы Agile (scrum) проектов в контексте ba
решение основной проблемы Agile (scrum) проектов в контексте ba
 
Uwe usability evaluation
Uwe usability evaluationUwe usability evaluation
Uwe usability evaluation
 
Css part2
Css part2Css part2
Css part2
 
Таблицы Html
Таблицы HtmlТаблицы Html
Таблицы Html
 
Тестирование требований
Тестирование требованийТестирование требований
Тестирование требований
 
CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)
 
Введение в веб-проектирование
Введение в веб-проектированиеВведение в веб-проектирование
Введение в веб-проектирование
 

Similar to Layout with flexbox

CSS3 Flexbox & Responsive Design
CSS3 Flexbox & Responsive DesignCSS3 Flexbox & Responsive Design
CSS3 Flexbox & Responsive Design
Arash Milani
 

Similar to Layout with flexbox (20)

Flexbox Will Shock You!
Flexbox Will Shock You!Flexbox Will Shock You!
Flexbox Will Shock You!
 
A complete guide to flexbox
A complete guide to flexboxA complete guide to flexbox
A complete guide to flexbox
 
Css3 - Flex Box e Efeitos
Css3 - Flex Box e EfeitosCss3 - Flex Box e Efeitos
Css3 - Flex Box e Efeitos
 
Is Flexbox the Future of Layout?
Is Flexbox the Future of Layout?Is Flexbox the Future of Layout?
Is Flexbox the Future of Layout?
 
CSS3 Flex Layout
CSS3 Flex LayoutCSS3 Flex Layout
CSS3 Flex Layout
 
CSS3 Flexbox & Responsive Design
CSS3 Flexbox & Responsive DesignCSS3 Flexbox & Responsive Design
CSS3 Flexbox & Responsive Design
 
Enhancing Responsiveness with Flexbox (RWD Summit)
Enhancing Responsiveness with Flexbox (RWD Summit)Enhancing Responsiveness with Flexbox (RWD Summit)
Enhancing Responsiveness with Flexbox (RWD Summit)
 
flexbox report
flexbox reportflexbox report
flexbox report
 
Leveling Up with Flexbox (Smashing Conference)
Leveling Up with Flexbox (Smashing Conference)Leveling Up with Flexbox (Smashing Conference)
Leveling Up with Flexbox (Smashing Conference)
 
Flexing Your WordPress Themes
Flexing Your WordPress ThemesFlexing Your WordPress Themes
Flexing Your WordPress Themes
 
Introduction to flexbox
Introduction  to  flexboxIntroduction  to  flexbox
Introduction to flexbox
 
CSS Lessons Learned The Hard Way – Zoe Gillenwater
CSS Lessons Learned The Hard Way – Zoe GillenwaterCSS Lessons Learned The Hard Way – Zoe Gillenwater
CSS Lessons Learned The Hard Way – Zoe Gillenwater
 
CSS Lessons Learned the Hard Way (Beyond Tellerand)
CSS Lessons Learned the Hard Way (Beyond Tellerand)CSS Lessons Learned the Hard Way (Beyond Tellerand)
CSS Lessons Learned the Hard Way (Beyond Tellerand)
 
Single Page Applications Workshop Part I: Interesting Topics in HTML5, CSS an...
Single Page Applications Workshop Part I: Interesting Topics in HTML5, CSS an...Single Page Applications Workshop Part I: Interesting Topics in HTML5, CSS an...
Single Page Applications Workshop Part I: Interesting Topics in HTML5, CSS an...
 
Flex Web Development.pdf
Flex Web Development.pdfFlex Web Development.pdf
Flex Web Development.pdf
 
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
 
CSS flexbox
CSS flexboxCSS flexbox
CSS flexbox
 
Building Layouts with CSS
Building Layouts with CSSBuilding Layouts with CSS
Building Layouts with CSS
 
Enhancing Responsiveness With Flexbox (CSS Day)
Enhancing Responsiveness With Flexbox (CSS Day)Enhancing Responsiveness With Flexbox (CSS Day)
Enhancing Responsiveness With Flexbox (CSS Day)
 
Using Flexbox Today (Frontend United 2016)
Using Flexbox Today (Frontend United 2016)Using Flexbox Today (Frontend United 2016)
Using Flexbox Today (Frontend United 2016)
 

Recently uploaded

NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
Amil baba
 
Heuristic Evaluation of System & Application
Heuristic Evaluation of System & ApplicationHeuristic Evaluation of System & Application
Heuristic Evaluation of System & Application
Jaime Brown
 
Presentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentationPresentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentation
ajroy0196
 
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
JIT KUMAR GUPTA
 
一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理
cyebo
 
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjjWeek 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
joshuaclack73
 

Recently uploaded (20)

CADD 141 - Puzzle Cube Project - Product Photos
CADD 141 - Puzzle Cube Project - Product PhotosCADD 141 - Puzzle Cube Project - Product Photos
CADD 141 - Puzzle Cube Project - Product Photos
 
Bit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolioBit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolio
 
And that's about to change! (Service Design Drinks Berlin May 2024)
And that's about to change! (Service Design Drinks Berlin May 2024)And that's about to change! (Service Design Drinks Berlin May 2024)
And that's about to change! (Service Design Drinks Berlin May 2024)
 
iF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythreeiF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythree
 
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
 
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
 
The Journey of Fashion Designer Sketches - From Concept to Catwalk
The Journey of Fashion Designer Sketches - From Concept to CatwalkThe Journey of Fashion Designer Sketches - From Concept to Catwalk
The Journey of Fashion Designer Sketches - From Concept to Catwalk
 
Avoid these common UI/UX design mistakes
 Avoid these common UI/UX design mistakes Avoid these common UI/UX design mistakes
Avoid these common UI/UX design mistakes
 
Heuristic Evaluation of System & Application
Heuristic Evaluation of System & ApplicationHeuristic Evaluation of System & Application
Heuristic Evaluation of System & Application
 
Naer VR: Advanced Research and Usability Testing Project
Naer VR: Advanced Research and Usability Testing ProjectNaer VR: Advanced Research and Usability Testing Project
Naer VR: Advanced Research and Usability Testing Project
 
Heidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD PortfolioHeidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD Portfolio
 
Design Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM SpecialistDesign Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM Specialist
 
Latest Trends in Home and Building Design
Latest Trends in Home and Building DesignLatest Trends in Home and Building Design
Latest Trends in Home and Building Design
 
Presentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentationPresentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentation
 
Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3
 
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
 
一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理
 
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjjWeek 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
 
Week of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_HeadersWeek of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_Headers
 
Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024
 

Layout with flexbox