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

Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjjWeek 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
joshuaclack73
 
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质
yzeoq
 
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
Amil baba
 
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
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
 
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
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
 
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
pillahdonald
 
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
Famous and Important UIUX Laws for your next Digital product
Famous and Important UIUX Laws for your next Digital productFamous and Important UIUX Laws for your next Digital product
Famous and Important UIUX Laws for your next Digital product
Think 360 Studio
 

Recently uploaded (20)

Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjjWeek 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
 
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
 
挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质
 
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
 
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
 
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 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
 
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
 
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
 
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 ...
 
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
 
Spring Summer 2026 Inspirations trend book Peclers Paris
Spring Summer 2026 Inspirations trend book Peclers ParisSpring Summer 2026 Inspirations trend book Peclers Paris
Spring Summer 2026 Inspirations trend book Peclers Paris
 
Mark Zuckerberg Carthago Delenda Est Shirt
Mark Zuckerberg Carthago Delenda Est ShirtMark Zuckerberg Carthago Delenda Est Shirt
Mark Zuckerberg Carthago Delenda Est Shirt
 
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
 
Bit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolioBit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolio
 
Morgenbooster: Storytelling in Identity Design
Morgenbooster: Storytelling in Identity DesignMorgenbooster: Storytelling in Identity Design
Morgenbooster: Storytelling in Identity Design
 
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
 
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
 
Design Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM SpecialistDesign Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM Specialist
 
Famous and Important UIUX Laws for your next Digital product
Famous and Important UIUX Laws for your next Digital productFamous and Important UIUX Laws for your next Digital product
Famous and Important UIUX Laws for your next Digital product
 

Layout with flexbox