SlideShare a Scribd company logo
A Complete Guide To Flexbox
What is Flexbox?
This is a way of designing, aligning items and distributing surplus space.
Flex stands for flexibility, adaptability. Thus, flexible layout elements are flexible boxes. The
ability to fill extra areas without using javascript is one of the key advantages of flexbox.
Flexbox is a one-dimensional layout approach that allows you to arrange things in rows or
columns.
CSS flexbox is superior for horizontal and vertical alignment of objects within the section,
even if their size is unknown and/or dynamic.
Flexbox = Flexible + Box
Flex Browser & Layout Support:
By September 2020, CSS Flexible Box Layouts are supported by 98.69% of the installed
browsers, or by 99.29% of the desktop and 100% of mobile.
All desktop/mobile/tablet browsers with the newest version support, in addition to the IE 11
desktop browser. Partial support is provided in the IE 11 desktop browser.
Flex CSS Syntax:
div { display: flex; } => [ div: Selector | display: Property | flex: Value ]
Flexbox Example With Different Requirement:
Main axis
Main axis stands for a flex container as the primary axis, all flex items are managed with the
main axis.
Main-start | main-end
The flex items are placed within the container starting on the main-start side and going
toward the main-end side.
Horizontal alignment
Main size | main size property
The width or height of a flex container or flex item, whichever is in the main dimension, is
that box’s main size.
Cross axis
The axis perpendicular to the main axis is called the cross axis. It extends in the cross
dimension.
Cross-start | cross-end
Flex lines are filled with items and placed into the container starting on the cross-start side
of the flex container and going toward the cross-end side.
Vertical alignment
Cross size
Cross size defines all flex items vertical heights.
Also Read:[What Is A Headless Content Management System(CMS)?]
3.1. How to create Flex Containers using flex or
inline-flex
Property: display
Value: flex | inline-flex
Applies to: flex containers
flex: The flex value contains full width.
inline-flex: With the inline-flex value contain inline width based on content.
3.2. How to set Ordering and Orientation in flex.
2.1. Flex Flow Direction: the flex-direction property
Property: flex-direction
Value: row | row-reverse | column | column-reverse
Initial: row
Applies to: flex containers
row: flex items arranged in horizontal alignment, sequence 1 2 3.
row-reverse: flex items arranged in reverse horizontal alignment, sequence 3 2 1.
column: flex items arranged in vertical alignment, sequence 1 2 3.
column-reverse: flex items arranged in reverse vertical alignment, sequence 3 2 1.
3.3. How to wrap content using flex-wrap
Name: flex-wrap
Value: nowrap | wrap | wrap-reverse
Initial: nowrap
Applies to: flex containers
nowrap: The flex container is single-line.
wrap: The flex container is multi-line.
wrap-reverse: Same as wrap but, line sequence reverse order not items.
3.4. How to display contents using Display Order
Property
Name: order
Value: <integer>
Initial: 0
Applies to: flex items
order: defines the flex items order.
3.5. How to set width using Flex items width
Applies to: flex items
.flex-item { width: 80px; } => Set flex items width with 80px.
.flex-item { width: 80px; flex: auto; } => Set flex items width according to row remaining
space but, consider flex items width 80px or more.
3.6. How to set content horizontally using justify-content
property.
flex items horizontal alignment property:
Name: justify-content
Value: flex-start | flex-end | center | space-between | space-around
Initial: flex-start
Applies to: flex containers
A complete guide to flexbox
3.7. How to set content vertically using the align
property?
flex containers vertical alignment property:
Name: align-items
Value: flex-start | flex-end | center | baseline | stretch
Initial: stretch
Applies to: flex containers
Name: align-self
Value: auto | flex-start | flex-end | center | baseline | stretch
Initial: auto
Applies to: flex items
baseline: practically baseline alignment consider same as flex-start.
Flex Property Index:
Not Supported CSS Property in Flexbox:
In the context of Flexbox Layout, some characteristics designed to assume the block layout
don’t apply.
CSS Property not supported:
The column* properties in the Specific[CSS3 col-*] The Multi-column Layout module has no
impact on a flex container.
Float and clear have no effect and do not take off-flow on the flex item. The float property
may, however, still affect the flex box.
A flex item has no vertical-align effect.
the ::first-line and ::first-letter pseudo-elements do not apply to flex containers, and flex
containers do not contribute a first formatted line or first letter to their ancestors.
Wrapping up
Over the next few years there will still be handy floats, tables and all other strategies for
layouting dead soon. Each member of this “family of layout tools” nonetheless has some
limitations in developing layouts. These drawbacks stem from standards which did not
anticipate the layouts of today. That is why Flexbox comes in handy.

More Related Content

Similar to A complete guide to flexbox

CSS3 Flex Layout
CSS3 Flex LayoutCSS3 Flex Layout
CSS3 Flex Layout
Neha Sharma
 
Flexbox Will Shock You!
Flexbox Will Shock You!Flexbox Will Shock You!
Flexbox Will Shock You!
Scott Vandehey
 
What The Flexbox? An Intro to Flexbox
What The Flexbox? An Intro to FlexboxWhat The Flexbox? An Intro to Flexbox
What The Flexbox? An Intro to Flexbox
Lauren Pittenger
 
Enhancing Responsiveness With Flexbox (CSS Day)
Enhancing Responsiveness With Flexbox (CSS Day)Enhancing Responsiveness With Flexbox (CSS Day)
Enhancing Responsiveness With Flexbox (CSS Day)
Zoe Gillenwater
 
Flex box
Flex boxFlex box
Flex box
Harish Karthick
 
Is Flexbox the Future of Layout?
Is Flexbox the Future of Layout?Is Flexbox the Future of Layout?
Is Flexbox the Future of Layout?
jameswillweb
 
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)
Zoe Gillenwater
 
Lecture-9.pptx
Lecture-9.pptxLecture-9.pptx
Lecture-9.pptx
vishal choudhary
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
Rachel Andrew
 
Using Flexbox Today (CSS Summit 2016)
Using Flexbox Today (CSS Summit 2016)Using Flexbox Today (CSS Summit 2016)
Using Flexbox Today (CSS Summit 2016)
Zoe Gillenwater
 
#4 HTML & CSS [know-how]
#4 HTML & CSS [know-how]#4 HTML & CSS [know-how]
#4 HTML & CSS [know-how]
Dalibor Gogic
 
Understanding Flexbox Layout in React Native.pdf
Understanding Flexbox Layout in React Native.pdfUnderstanding Flexbox Layout in React Native.pdf
Understanding Flexbox Layout in React Native.pdf
Katy Slemon
 
Layout with flexbox
Layout with flexboxLayout with flexbox
Layout with flexbox
The Level Consulting, Ltd.
 
Building Layouts with CSS
Building Layouts with CSSBuilding Layouts with CSS
Building Layouts with CSS
Boris Paillard
 
Enhancing Responsiveness With Flexbox (Smashing Conference)
Enhancing Responsiveness With Flexbox (Smashing Conference)Enhancing Responsiveness With Flexbox (Smashing Conference)
Enhancing Responsiveness With Flexbox (Smashing Conference)
Zoe Gillenwater
 
CSS3 Flexbox & Responsive Design
CSS3 Flexbox & Responsive DesignCSS3 Flexbox & Responsive Design
CSS3 Flexbox & Responsive Design
Arash Milani
 
CSS Flexbox (flexible box layout)
CSS Flexbox (flexible box layout)CSS Flexbox (flexible box layout)
CSS Flexbox (flexible box layout)
Woodridge Software
 
The New CSS Layout - dotCSS
The New CSS Layout - dotCSSThe New CSS Layout - dotCSS
The New CSS Layout - dotCSS
Rachel Andrew
 
Leveling Up with Flexbox (Smashing Conference)
Leveling Up with Flexbox (Smashing Conference)Leveling Up with Flexbox (Smashing Conference)
Leveling Up with Flexbox (Smashing Conference)
Zoe Gillenwater
 
Using Flexbox Today (Frontend United 2016)
Using Flexbox Today (Frontend United 2016)Using Flexbox Today (Frontend United 2016)
Using Flexbox Today (Frontend United 2016)
Zoe Gillenwater
 

Similar to A complete guide to flexbox (20)

CSS3 Flex Layout
CSS3 Flex LayoutCSS3 Flex Layout
CSS3 Flex Layout
 
Flexbox Will Shock You!
Flexbox Will Shock You!Flexbox Will Shock You!
Flexbox Will Shock You!
 
What The Flexbox? An Intro to Flexbox
What The Flexbox? An Intro to FlexboxWhat The Flexbox? An Intro to Flexbox
What The Flexbox? An Intro to Flexbox
 
Enhancing Responsiveness With Flexbox (CSS Day)
Enhancing Responsiveness With Flexbox (CSS Day)Enhancing Responsiveness With Flexbox (CSS Day)
Enhancing Responsiveness With Flexbox (CSS Day)
 
Flex box
Flex boxFlex box
Flex box
 
Is Flexbox the Future of Layout?
Is Flexbox the Future of Layout?Is Flexbox the Future of Layout?
Is Flexbox the Future of Layout?
 
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)
 
Lecture-9.pptx
Lecture-9.pptxLecture-9.pptx
Lecture-9.pptx
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid 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)
 
#4 HTML & CSS [know-how]
#4 HTML & CSS [know-how]#4 HTML & CSS [know-how]
#4 HTML & CSS [know-how]
 
Understanding Flexbox Layout in React Native.pdf
Understanding Flexbox Layout in React Native.pdfUnderstanding Flexbox Layout in React Native.pdf
Understanding Flexbox Layout in React Native.pdf
 
Layout with flexbox
Layout with flexboxLayout with flexbox
Layout with flexbox
 
Building Layouts with CSS
Building Layouts with CSSBuilding Layouts with CSS
Building Layouts with CSS
 
Enhancing Responsiveness With Flexbox (Smashing Conference)
Enhancing Responsiveness With Flexbox (Smashing Conference)Enhancing Responsiveness With Flexbox (Smashing Conference)
Enhancing Responsiveness With Flexbox (Smashing Conference)
 
CSS3 Flexbox & Responsive Design
CSS3 Flexbox & Responsive DesignCSS3 Flexbox & Responsive Design
CSS3 Flexbox & Responsive Design
 
CSS Flexbox (flexible box layout)
CSS Flexbox (flexible box layout)CSS Flexbox (flexible box layout)
CSS Flexbox (flexible box layout)
 
The New CSS Layout - dotCSS
The New CSS Layout - dotCSSThe New CSS Layout - dotCSS
The New CSS Layout - dotCSS
 
Leveling Up with Flexbox (Smashing Conference)
Leveling Up with Flexbox (Smashing Conference)Leveling Up with Flexbox (Smashing Conference)
Leveling Up with Flexbox (Smashing Conference)
 
Using Flexbox Today (Frontend United 2016)
Using Flexbox Today (Frontend United 2016)Using Flexbox Today (Frontend United 2016)
Using Flexbox Today (Frontend United 2016)
 

More from Bytes Technolab Inc.

Step-by-Step Guide to Developing a Successful iOS App.pdf
Step-by-Step Guide to Developing a Successful iOS App.pdfStep-by-Step Guide to Developing a Successful iOS App.pdf
Step-by-Step Guide to Developing a Successful iOS App.pdf
Bytes Technolab Inc.
 
Step-by-Step Guide to Developing a Successful iOS App.docx
Step-by-Step Guide to Developing a Successful iOS App.docxStep-by-Step Guide to Developing a Successful iOS App.docx
Step-by-Step Guide to Developing a Successful iOS App.docx
Bytes Technolab Inc.
 
Things to Consider While Choosing Mobile App Development Framework.pptx
Things to Consider While Choosing Mobile App Development Framework.pptxThings to Consider While Choosing Mobile App Development Framework.pptx
Things to Consider While Choosing Mobile App Development Framework.pptx
Bytes Technolab Inc.
 
Things to Consider While Choosing Mobile App Development Framework.pptx
Things to Consider While Choosing Mobile App Development Framework.pptxThings to Consider While Choosing Mobile App Development Framework.pptx
Things to Consider While Choosing Mobile App Development Framework.pptx
Bytes Technolab Inc.
 
Hiring Dedicated MERN Developer Essential Factors to Consider.pdf
Hiring Dedicated MERN Developer Essential Factors to Consider.pdfHiring Dedicated MERN Developer Essential Factors to Consider.pdf
Hiring Dedicated MERN Developer Essential Factors to Consider.pdf
Bytes Technolab Inc.
 
Hiring Dedicated MERN Developer Essential Factors to Consider.docx
Hiring Dedicated MERN Developer Essential Factors to Consider.docxHiring Dedicated MERN Developer Essential Factors to Consider.docx
Hiring Dedicated MERN Developer Essential Factors to Consider.docx
Bytes Technolab Inc.
 
SWOT Analysis of Native vs Cross-platform for Mobile App Development.pptx
SWOT Analysis of Native vs Cross-platform for Mobile App Development.pptxSWOT Analysis of Native vs Cross-platform for Mobile App Development.pptx
SWOT Analysis of Native vs Cross-platform for Mobile App Development.pptx
Bytes Technolab Inc.
 
What makes Flutter the Ideal Choice for Global Startups.pdf
What makes Flutter the Ideal Choice for Global Startups.pdfWhat makes Flutter the Ideal Choice for Global Startups.pdf
What makes Flutter the Ideal Choice for Global Startups.pdf
Bytes Technolab Inc.
 
Why Choose Laravel Framework to Develop High-Performing Web Apps in 2023.pptx
Why Choose Laravel Framework to Develop High-Performing Web Apps in 2023.pptxWhy Choose Laravel Framework to Develop High-Performing Web Apps in 2023.pptx
Why Choose Laravel Framework to Develop High-Performing Web Apps in 2023.pptx
Bytes Technolab Inc.
 
What makes Flutter the Ideal Choice for Global Startups.docx
What makes Flutter the Ideal Choice for Global Startups.docxWhat makes Flutter the Ideal Choice for Global Startups.docx
What makes Flutter the Ideal Choice for Global Startups.docx
Bytes Technolab Inc.
 
What shall you Pre-consider While Integrating Magento 2 with Third-party Apps...
What shall you Pre-consider While Integrating Magento 2 with Third-party Apps...What shall you Pre-consider While Integrating Magento 2 with Third-party Apps...
What shall you Pre-consider While Integrating Magento 2 with Third-party Apps...
Bytes Technolab Inc.
 
Top 12 Reasons You Should Invest in Android App Development.pptx
Top 12 Reasons You Should Invest in Android App Development.pptxTop 12 Reasons You Should Invest in Android App Development.pptx
Top 12 Reasons You Should Invest in Android App Development.pptx
Bytes Technolab Inc.
 
What shall you Pre-consider While Integrating Magento 2 with Third-partsy App...
What shall you Pre-consider While Integrating Magento 2 with Third-partsy App...What shall you Pre-consider While Integrating Magento 2 with Third-partsy App...
What shall you Pre-consider While Integrating Magento 2 with Third-partsy App...
Bytes Technolab Inc.
 
A complete guide to developing a beautiful e commerce mobile application like...
A complete guide to developing a beautiful e commerce mobile application like...A complete guide to developing a beautiful e commerce mobile application like...
A complete guide to developing a beautiful e commerce mobile application like...
Bytes Technolab Inc.
 

More from Bytes Technolab Inc. (14)

Step-by-Step Guide to Developing a Successful iOS App.pdf
Step-by-Step Guide to Developing a Successful iOS App.pdfStep-by-Step Guide to Developing a Successful iOS App.pdf
Step-by-Step Guide to Developing a Successful iOS App.pdf
 
Step-by-Step Guide to Developing a Successful iOS App.docx
Step-by-Step Guide to Developing a Successful iOS App.docxStep-by-Step Guide to Developing a Successful iOS App.docx
Step-by-Step Guide to Developing a Successful iOS App.docx
 
Things to Consider While Choosing Mobile App Development Framework.pptx
Things to Consider While Choosing Mobile App Development Framework.pptxThings to Consider While Choosing Mobile App Development Framework.pptx
Things to Consider While Choosing Mobile App Development Framework.pptx
 
Things to Consider While Choosing Mobile App Development Framework.pptx
Things to Consider While Choosing Mobile App Development Framework.pptxThings to Consider While Choosing Mobile App Development Framework.pptx
Things to Consider While Choosing Mobile App Development Framework.pptx
 
Hiring Dedicated MERN Developer Essential Factors to Consider.pdf
Hiring Dedicated MERN Developer Essential Factors to Consider.pdfHiring Dedicated MERN Developer Essential Factors to Consider.pdf
Hiring Dedicated MERN Developer Essential Factors to Consider.pdf
 
Hiring Dedicated MERN Developer Essential Factors to Consider.docx
Hiring Dedicated MERN Developer Essential Factors to Consider.docxHiring Dedicated MERN Developer Essential Factors to Consider.docx
Hiring Dedicated MERN Developer Essential Factors to Consider.docx
 
SWOT Analysis of Native vs Cross-platform for Mobile App Development.pptx
SWOT Analysis of Native vs Cross-platform for Mobile App Development.pptxSWOT Analysis of Native vs Cross-platform for Mobile App Development.pptx
SWOT Analysis of Native vs Cross-platform for Mobile App Development.pptx
 
What makes Flutter the Ideal Choice for Global Startups.pdf
What makes Flutter the Ideal Choice for Global Startups.pdfWhat makes Flutter the Ideal Choice for Global Startups.pdf
What makes Flutter the Ideal Choice for Global Startups.pdf
 
Why Choose Laravel Framework to Develop High-Performing Web Apps in 2023.pptx
Why Choose Laravel Framework to Develop High-Performing Web Apps in 2023.pptxWhy Choose Laravel Framework to Develop High-Performing Web Apps in 2023.pptx
Why Choose Laravel Framework to Develop High-Performing Web Apps in 2023.pptx
 
What makes Flutter the Ideal Choice for Global Startups.docx
What makes Flutter the Ideal Choice for Global Startups.docxWhat makes Flutter the Ideal Choice for Global Startups.docx
What makes Flutter the Ideal Choice for Global Startups.docx
 
What shall you Pre-consider While Integrating Magento 2 with Third-party Apps...
What shall you Pre-consider While Integrating Magento 2 with Third-party Apps...What shall you Pre-consider While Integrating Magento 2 with Third-party Apps...
What shall you Pre-consider While Integrating Magento 2 with Third-party Apps...
 
Top 12 Reasons You Should Invest in Android App Development.pptx
Top 12 Reasons You Should Invest in Android App Development.pptxTop 12 Reasons You Should Invest in Android App Development.pptx
Top 12 Reasons You Should Invest in Android App Development.pptx
 
What shall you Pre-consider While Integrating Magento 2 with Third-partsy App...
What shall you Pre-consider While Integrating Magento 2 with Third-partsy App...What shall you Pre-consider While Integrating Magento 2 with Third-partsy App...
What shall you Pre-consider While Integrating Magento 2 with Third-partsy App...
 
A complete guide to developing a beautiful e commerce mobile application like...
A complete guide to developing a beautiful e commerce mobile application like...A complete guide to developing a beautiful e commerce mobile application like...
A complete guide to developing a beautiful e commerce mobile application like...
 

Recently uploaded

當測試開始左移
當測試開始左移當測試開始左移
當測試開始左移
Jersey (CHE-PING) Su
 
Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...
Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...
Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...
OnePlan Solutions
 
🚂🚘 Premium Girls Call Ranchi 🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
🚂🚘 Premium Girls Call Ranchi  🛵🚡000XX00000 💃 Choose Best And Top Girl Service...🚂🚘 Premium Girls Call Ranchi  🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
🚂🚘 Premium Girls Call Ranchi 🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
bahubalikumar09988
 
A Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdf
A Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdfA Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdf
A Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdf
kalichargn70th171
 
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
bhumivarma35300
 
How To Fill Timesheet in TaskSprint: Quick Guide 2024
How To Fill Timesheet in TaskSprint: Quick Guide 2024How To Fill Timesheet in TaskSprint: Quick Guide 2024
How To Fill Timesheet in TaskSprint: Quick Guide 2024
TaskSprint | Employee Efficiency Software
 
AI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdf
AI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdfAI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdf
AI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdf
Daniel Zivkovic
 
Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...
Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...
Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...
ashiklo9823
 
welcome to presentation on Google Apps
welcome to   presentation on Google Appswelcome to   presentation on Google Apps
welcome to presentation on Google Apps
AsifKarimJim
 
SAP implementation steps PDF - Zyple Software
SAP implementation steps PDF - Zyple SoftwareSAP implementation steps PDF - Zyple Software
SAP implementation steps PDF - Zyple Software
Zyple Software
 
AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.
AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.
AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.
Srinivas Dukka
 
Comprehensive Vulnerability Assessments Process _ Aardwolf Security.docx
Comprehensive Vulnerability Assessments Process _ Aardwolf Security.docxComprehensive Vulnerability Assessments Process _ Aardwolf Security.docx
Comprehensive Vulnerability Assessments Process _ Aardwolf Security.docx
Aardwolf Security
 
Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...
Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...
Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...
norina2645
 
Mobile App Development Company in Noida - Drona Infotech.
Mobile App Development Company in Noida - Drona Infotech.Mobile App Development Company in Noida - Drona Infotech.
Mobile App Development Company in Noida - Drona Infotech.
Mobile App Development Company in Noida - Drona Infotech
 
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
3610stuck
 
Odoo E-commerce website development guides
Odoo E-commerce website development guidesOdoo E-commerce website development guides
Odoo E-commerce website development guides
jhkdigitalmarketing
 
Busty Girls Call Mumbai 9930245274 Unlimited Short Providing Girls Service Av...
Busty Girls Call Mumbai 9930245274 Unlimited Short Providing Girls Service Av...Busty Girls Call Mumbai 9930245274 Unlimited Short Providing Girls Service Av...
Busty Girls Call Mumbai 9930245274 Unlimited Short Providing Girls Service Av...
revolutionary575
 
Tour and travel website management in odoo,
Tour and travel website management in odoo,Tour and travel website management in odoo,
Tour and travel website management in odoo,
Axis Technolabs
 
bangalore Girls call 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
bangalore Girls call  👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Deliverybangalore Girls call  👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
bangalore Girls call 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
sunilverma7884
 
Il Data Streaming per un’AI real-time di nuova generazione
Il Data Streaming per un’AI real-time di nuova generazioneIl Data Streaming per un’AI real-time di nuova generazione
Il Data Streaming per un’AI real-time di nuova generazione
confluent
 

Recently uploaded (20)

當測試開始左移
當測試開始左移當測試開始左移
當測試開始左移
 
Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...
Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...
Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...
 
🚂🚘 Premium Girls Call Ranchi 🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
🚂🚘 Premium Girls Call Ranchi  🛵🚡000XX00000 💃 Choose Best And Top Girl Service...🚂🚘 Premium Girls Call Ranchi  🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
🚂🚘 Premium Girls Call Ranchi 🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
 
A Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdf
A Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdfA Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdf
A Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdf
 
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
 
How To Fill Timesheet in TaskSprint: Quick Guide 2024
How To Fill Timesheet in TaskSprint: Quick Guide 2024How To Fill Timesheet in TaskSprint: Quick Guide 2024
How To Fill Timesheet in TaskSprint: Quick Guide 2024
 
AI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdf
AI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdfAI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdf
AI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdf
 
Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...
Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...
Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...
 
welcome to presentation on Google Apps
welcome to   presentation on Google Appswelcome to   presentation on Google Apps
welcome to presentation on Google Apps
 
SAP implementation steps PDF - Zyple Software
SAP implementation steps PDF - Zyple SoftwareSAP implementation steps PDF - Zyple Software
SAP implementation steps PDF - Zyple Software
 
AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.
AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.
AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.
 
Comprehensive Vulnerability Assessments Process _ Aardwolf Security.docx
Comprehensive Vulnerability Assessments Process _ Aardwolf Security.docxComprehensive Vulnerability Assessments Process _ Aardwolf Security.docx
Comprehensive Vulnerability Assessments Process _ Aardwolf Security.docx
 
Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...
Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...
Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...
 
Mobile App Development Company in Noida - Drona Infotech.
Mobile App Development Company in Noida - Drona Infotech.Mobile App Development Company in Noida - Drona Infotech.
Mobile App Development Company in Noida - Drona Infotech.
 
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
 
Odoo E-commerce website development guides
Odoo E-commerce website development guidesOdoo E-commerce website development guides
Odoo E-commerce website development guides
 
Busty Girls Call Mumbai 9930245274 Unlimited Short Providing Girls Service Av...
Busty Girls Call Mumbai 9930245274 Unlimited Short Providing Girls Service Av...Busty Girls Call Mumbai 9930245274 Unlimited Short Providing Girls Service Av...
Busty Girls Call Mumbai 9930245274 Unlimited Short Providing Girls Service Av...
 
Tour and travel website management in odoo,
Tour and travel website management in odoo,Tour and travel website management in odoo,
Tour and travel website management in odoo,
 
bangalore Girls call 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
bangalore Girls call  👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Deliverybangalore Girls call  👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
bangalore Girls call 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
 
Il Data Streaming per un’AI real-time di nuova generazione
Il Data Streaming per un’AI real-time di nuova generazioneIl Data Streaming per un’AI real-time di nuova generazione
Il Data Streaming per un’AI real-time di nuova generazione
 

A complete guide to flexbox

  • 1. A Complete Guide To Flexbox What is Flexbox? This is a way of designing, aligning items and distributing surplus space. Flex stands for flexibility, adaptability. Thus, flexible layout elements are flexible boxes. The ability to fill extra areas without using javascript is one of the key advantages of flexbox. Flexbox is a one-dimensional layout approach that allows you to arrange things in rows or columns. CSS flexbox is superior for horizontal and vertical alignment of objects within the section, even if their size is unknown and/or dynamic. Flexbox = Flexible + Box
  • 2. Flex Browser & Layout Support: By September 2020, CSS Flexible Box Layouts are supported by 98.69% of the installed browsers, or by 99.29% of the desktop and 100% of mobile. All desktop/mobile/tablet browsers with the newest version support, in addition to the IE 11 desktop browser. Partial support is provided in the IE 11 desktop browser. Flex CSS Syntax: div { display: flex; } => [ div: Selector | display: Property | flex: Value ] Flexbox Example With Different Requirement: Main axis Main axis stands for a flex container as the primary axis, all flex items are managed with the main axis. Main-start | main-end The flex items are placed within the container starting on the main-start side and going toward the main-end side.
  • 3. Horizontal alignment Main size | main size property The width or height of a flex container or flex item, whichever is in the main dimension, is that box’s main size. Cross axis The axis perpendicular to the main axis is called the cross axis. It extends in the cross dimension. Cross-start | cross-end Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side. Vertical alignment Cross size Cross size defines all flex items vertical heights. Also Read:[What Is A Headless Content Management System(CMS)?] 3.1. How to create Flex Containers using flex or inline-flex Property: display Value: flex | inline-flex Applies to: flex containers flex: The flex value contains full width. inline-flex: With the inline-flex value contain inline width based on content.
  • 4. 3.2. How to set Ordering and Orientation in flex. 2.1. Flex Flow Direction: the flex-direction property Property: flex-direction Value: row | row-reverse | column | column-reverse Initial: row Applies to: flex containers row: flex items arranged in horizontal alignment, sequence 1 2 3. row-reverse: flex items arranged in reverse horizontal alignment, sequence 3 2 1. column: flex items arranged in vertical alignment, sequence 1 2 3. column-reverse: flex items arranged in reverse vertical alignment, sequence 3 2 1. 3.3. How to wrap content using flex-wrap Name: flex-wrap Value: nowrap | wrap | wrap-reverse Initial: nowrap Applies to: flex containers nowrap: The flex container is single-line. wrap: The flex container is multi-line. wrap-reverse: Same as wrap but, line sequence reverse order not items.
  • 5. 3.4. How to display contents using Display Order Property Name: order Value: <integer> Initial: 0 Applies to: flex items order: defines the flex items order.
  • 6. 3.5. How to set width using Flex items width Applies to: flex items .flex-item { width: 80px; } => Set flex items width with 80px. .flex-item { width: 80px; flex: auto; } => Set flex items width according to row remaining space but, consider flex items width 80px or more.
  • 7. 3.6. How to set content horizontally using justify-content property. flex items horizontal alignment property: Name: justify-content Value: flex-start | flex-end | center | space-between | space-around Initial: flex-start Applies to: flex containers
  • 9. 3.7. How to set content vertically using the align property? flex containers vertical alignment property: Name: align-items Value: flex-start | flex-end | center | baseline | stretch Initial: stretch Applies to: flex containers Name: align-self Value: auto | flex-start | flex-end | center | baseline | stretch Initial: auto Applies to: flex items baseline: practically baseline alignment consider same as flex-start.
  • 11. Not Supported CSS Property in Flexbox:
  • 12. In the context of Flexbox Layout, some characteristics designed to assume the block layout don’t apply. CSS Property not supported: The column* properties in the Specific[CSS3 col-*] The Multi-column Layout module has no impact on a flex container. Float and clear have no effect and do not take off-flow on the flex item. The float property may, however, still affect the flex box. A flex item has no vertical-align effect. the ::first-line and ::first-letter pseudo-elements do not apply to flex containers, and flex containers do not contribute a first formatted line or first letter to their ancestors. Wrapping up Over the next few years there will still be handy floats, tables and all other strategies for layouting dead soon. Each member of this “family of layout tools” nonetheless has some limitations in developing layouts. These drawbacks stem from standards which did not anticipate the layouts of today. That is why Flexbox comes in handy.