EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login
Home Software Development Software Development Tutorials Flexbox Essentials For Beginners
Secondary Sidebar
Data Analytics Basics
  • Basics
    • Salesforce Health Cloud in AWS
    • Salesforce REST API
    • Salesforce Order of Execution
    • Salesforce Governor Limits
    • Salesforce Vlocity
    • Salesforce Integration
    • Salesforce Developer Interview Questions
    • Salesforce CLI
    • Salesforce Zoom Integration
    • Salesforce Testing
    • Microsoft Dynamics Vs. Salesforce
    • Salesforce Einstein Analytics
    • Databricks Careers
    • Salesforce Developer
    • Salesforce Interview Questions
    • Predictive Analysis Algorithms
    • Salesforce Webassessor
    • Data manipulation tools
    • What is Natural Language Processing
    • Virtual Data Rooms Benefits
    • What Is Apache
    • What is Business Intelligence
    • Career in Business Intelligence
    • Predictive Modeling
    • What is NoSQL Database
    • What is Cluster Computing
    • Uses of Salesforce
    • Apache POI
    • es6 modules
    • The Beginners Guide to Startup Analytics
    • Analytics Software is Hiding From You
    • Real Time Analytics
    • Lean Analytics
    • Important Elements of Mudbox Software
    • Business Intelligence Tools (Benefits)
    • Mechatronics Projects
    • Know about A Business Analyst
    • Flexbox Essentials For Beginners
    • Predictive Analytics Tool
    • Modern Data Integration
    • Crowd Sourcing Data
    • Build a Data Supply Chain
    • What is Minitab
    • Sqoop Commands
    • Pig Commands
    • What is Apache Flink
    • What is Predictive Analytics
    • What is Business Analytics
    • What is Pig
    • What is Fuzzy Logic
    • What is Apache Tomcat
    • How MapReduce Works
    • Types of Data Model
    • Test Data Generation
    • Apache Flume
    • NoSQL Data Models
    • Advantages of NoSQL
    • What is Juypter Notebook
    • What is CentOS
    • What is MuleSoft
    • MapReduce Algorithms
    • What is Dropbox
    • Pandas.Dropna()
    • Salesforce IoT Cloud
    • Data Integration Tool
    • Career in Business Analytics
    • Marketing Analytics For Dummies
    • Risk Analytics Helps in Risk management
    • Salesforce Certification
    • Tips to Become Certified Salesforce Admin
    • Customer Analytics Techniques
    • What is Customer Analytics
    • What is Data Engineering?
    • Business Analysis Tools
    • Business Analytics Techniques
    • Smart City Application
    • COBOL Data Types
    • Business Intelligence Dashboard
    • What is MDM?
    • CAP Theorem
    • Pig Architecture
    • Pig Data Types
    • KMP Algorithm
    • What is Metadata?
    • Sqoop Import
    • Apache Solr
    • What is Impala?
    • Impala Database
    • What is Digital Image?
    • What is Kibana?
    • Kibana Visualization
    • Kibana Query
    • Kibana Reporting
    • Kibana Alert
    • Longitudinal Data Analysis
    • Metadata Management Tools
    • Time Series Analysis
    • Types of Arduino
    • Arduino Shields
    • What is Arduino UNO?
    • Arduino Sensors
    • Arduino Boards
    • Arduino Application
    • 8085 Architecture
    • Dynatrace Competitors
    • Data Migration Tools
    • Data Modeling Tools
    • Likert Scale Data Analysis
    • Predictive Analytics Techniques
    • Data Governance
    • What is RTK
    • Data Virtualization
    • Knowledge Engineering
    • Data Dictionaries
    • Types of Dimensions
    • What is Google Chrome?
    • Embedded Systems Architecture
    • Data Collection Tools
    • Panel Data Analysis
    • Sqoop Export
    • What is Metabase?
    • Data Analytics Technique
    • Features of Salesforce
    • MariaDB AWS
    • mariadb port
    • Business Intelligence Manager
    • MariaDB client
    • Data engineer skills
    • MariaDB WordPress
    • State Space Model
    • What is SSIS
    • SSIS Derived Column
    • SSIS CCBOE
    • SSIS Script Task
    • SSIS Connection Manager
    • SSIS Multicast
    • SSIS in Azure
    • Predictive analytics tools
    • Backup Tools
    • Components of time series analysis
    • Unified Endpoint Management
    • Data integrity types
    • JDBC connection string
    • DataSet Visualization
    • dataset preprocessing
    • Data Anonymization
    • Data Preparation Tools
    • Log Management Tools
    • Kibana Index Pattern
    • MapReduce API
    • What is Time Series?
    • CentOS wget
    • Data Analyst Technical Skills
    • Payment Gateway Testing
    • Create Table in Oracle
    • What is Quantum Computing?
    • Cloudera Architecture
    • Tomcat server.xml
    • Tomcat HTTPS
    • Tomcat deploy war
    • Tomcat timeout
    • Tomcat Web Server
    • Tomcat Environment Variables
    • What is IAM
    • Virtual Data Rooms
    • What is a Flow Chart?
    • Data Loss Prevention Software
    • Data Extraction Tool
    • Data Standardization
    • Data Virtualization Tools
    • Visualization in R
    • What is Nominal Data?
    • SSIS Transformations
    • Cloudera Manager
    • Dataset Repositories
    • Data Architects
    • Data Analyst Master Program
    • Data Engineer Projects
    • Data Analyst Skills
    • Data Engineer Role
    • Avro schema
    • Dashboarding Tools
    • Data Analytics Technique
    • Introduction to Statistical Learning
    • Databricks Delta Lake

Related Courses

Data Science Certification

Online Machine Learning Training

Cloud Computing Certification

Flexbox Essentials For Beginners

By Jesal ShethnaJesal Shethna

flexbox properties

Introduction to Flexbox Essentials

The concept behind Flexbox properties is to provide an ability to the container to automatically change the width, height, and order of its items to best fill up the space available. This can be really useful to accommodate items within different screen sizes and devices. Items are expanded to fill up any free space, or shrunk to avoid an overflow.

All in One Software Development Bundle(600+ Courses, 50+ projects)
Python TutorialC SharpJavaJavaScript
C Plus PlusSoftware TestingSQLKali Linux
Price
View Courses
600+ Online Courses | 50+ projects | 3000+ Hours | Verifiable Certificates | Lifetime Access
4.6 (86,950 ratings)

CSS Flexbox grid For Beginners

CSS is one of the first and easiest things to learn in web development and design, but don’t mistake its simplicity for lack of features. It has a number of amazing features and capabilities ready to be tapped into, one of them being its relatively new layout module: Flexbox properties.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Flexbox properties are one of the newer layouts available to CSS3, and there’s a lot to learn about it. Here, we get hands-on with the layout and how to use it. Before we begin, though, here’s a little background on Flexbox properties:

What are layout modes?

In the simplest terms, CSS Flexbox grid is a layout mode. CSS has a number of existing layout modes. The block layout mode (like display: block) has been around for a long while. Block layouts are a good choice to style full documents. In fact, a web browser treats several elements like divs and paragraphs as block level by default.

Another common layout mode is inline. The strong tag, input tag, and anchor tag are examples of inline-level elements. Google Chrome’s developer tools even let you view an element’s ‘computed style’ to determine the CSS properties and values that have been applied to the elements not explicitly set by the developer.

The relatively newer Flexbox properties (Flexible box) layout has been designed as a more efficient method of laying out, aligning and distributing space among container items, even if the size of these items is dynamic or unknown. Hence the term ‘flexible’.

The Flexbox Properties concept

The most important thing about Flexbox properties is that it is direction-agnostic. While the block layout is vertical-based and inline layout is horizontal-based, Flexbox is neither. Block and inline work well in the right situations, but lack the flexibility to support complicated or large applications, particularly when it comes to change orientation, stretching, shrinking, resizing and otherwise changing up the dimensions of the elements.

Where are Flexbox properties used?

Like any other CSS layout, Flexbox is best used in certain situations. In particular, it is appropriate for small-scale layouts and components of an application. For larger scale layouts, a Grid layout would be the wiser choice.

Why is Flexbox preferred?

A lot of developers and designers give preference to Flexbox properties whenever they can (sometimes too often!). This is because Flexbox properties are easier to use; the positioning of the elements is much simpler, so you can get more complex layouts with less coding. In other words, it makes the development process simpler.

A Guide to Flexbox Properties

Now that you know a little bit about Flexbox properties and how and why it works, here is a detailed guide into the layout. The layout’s model is made up of a parent container, also called a ‘flex container’. The immediate children from this container are called ‘flex items’.

The layout has gone through several iterations and syntax changes over the years since its first draft was created in 2009. The latest Flexbox specification is supported on the following web browsers:

  • Opera 17+
  • Internet Explorer 11+
  • Mozilla Firefox 28+
  • Google Chrome 29+
  • Apple Safari 6.1+
  • Android 4.4+
  • iOS 7.1+

The Terminology used in Flexbox properties

Here is a look at some basic terminology used in the Flexbox properties layout:

  • Display: This command is used to define the flex container. It could be inline or block, depending on the It also defines flex content for all the items within the container. Example:

.container {

display: flex; /* or inline-flex */

}

  • Order: Flex items are laid out according to the source order by default, but the ‘order’ property can control the order in which the items appear within the container. Example:

.item {

order: <integer>;

}

  • Flex-direction: This order sets up the main axis, defining the direction that flex items are placed within the container. Flex items can be primarily laid out in vertical or horizontal directions. Example:

.container {

flex-direction: row|row-reverse|column|column-reverse;

}

  • Flex-grow: This order defines the flex item’s ability to automatically scale up if it has space. It can accept a unitless value to serve as a proportion. This value dictates how much space the item should take up within the flex container. For instance, if all items have flex-grow set as 1, the remaining space within the container will be equally distributed to all the children. If the value is 2, the remaining space will take up two times as much space as the rest. Example:

.item {

flex-grow: <number>; /* default 0 */

}

  • Flex-shrink: This does the exact opposite as flex-grow, in that it shrinks the flex items when necessary. Example:

.item {

flex-shrink: <number>; /* default 1*/

}

  • Flex-basis: This order defines an elements default size before the remainder of space is distributed. It could be a length, like 5rem or 20%, or a keyword. The ‘auto’ keyword indicates that the item’s width and height be measured, and the ‘content’ keyword indicates that the item is sized based on its content. Example:

.item {

flex-basis: <length>  | auto; /* default auto */

}

  • Flex: This is a combined shorthand for all of the above three properties: flex-grow, flex-basis, and flex-shrink. The default is ‘0 1 auto’.

.item {

flex: none | [ <‘flex-grow’> <flex-shrink’> || <‘flex-basis’> ]

}

  • Justify-content: This order defines the main axis alignment and helps distribute the additional free space if there is any left when the items are inflexible or have reached their maximum size. This also helps control the alignment of the item when there is an overflow.

.container {

justify-content: flex-start| flex end | center | space-between | space-around;

}

  • Align-items: This is used to define the default behavior of the layout of flex items on the cross axis of the current line. It is essentially a version of ‘justify-content’ on the cross-axis, which is perpendicular to the main axis. Example:

.container {

align-items: flex-start | flex-end | center | baseline | stretch;

}

  • Align-content: This order aligns the lines of the container in case there is additional space on the cross-axis. It is similar to ‘justify-content’, but for the cross axis instead of the main axis. If there is just one line of flex items, this property does not have any effect. Example:

.container {

align-content: flex-start | flex-end | center | space-between | space-around| stretch;

}

Using Flexbox properties

In order to use the Flexbox layout, you can simply set the display property on the HTML parent element, like below:

.flex-container {

  display: -webkit-flex; /* Safari */

  display: flex;

}

If you prefer to display like an inline element, you could write in:

.flex-container {

  display: -webkit-inline-flex; /* Safari */

  display: inline-flex;

}

You only require this property to set on the parent flex container and its immediate flex items. The container children will automatically become flex items.

Flex Container properties

There are a lot of ways for grouping Flexbox properties, and the easiest way to learn about them is by splitting them into Flex container and item properties. We’ve just covered some of the flex container properties above. Let’s look at the rest:

  • Flex-direction: row or column

The flex-direction property can be laid out as columns vertically or rows horizontally. With row direction, the flex items are stacked left-to-right by default. Row-reverse changes this direction to right-to-left. The column direction is top-to-bottom by default, and the column-reverse function reverses this to a bottom-to-top direction.

  • Flex-wrap: nowrap or wrap

The flex-wrap property controls if the flex container’s children are laid out in multiple or single lines, and the direction in which the new lines are stacked. The nowrap value sees flex items displayed in a single row, shrunk to fit the width of the container by default. The wrap value sees flex items displayed in different rows in a left-to-right or top-to-bottom direction. You could add wrap-reverse to change the order too. The default value is nowrap.

  • Flex-flow

This property is basically a shorthand to set the flex-direction and flex-wrap properties together. The default value is ‘row nowrap’. Example:

.flex-container {

flex-flow: <flex-direction> || <flex-wrap>

}

  • Justify-content

The justify-content property has four values: flex-start to align items to the left side of the container; flex-end to align items to the right side; center to align with the center; space-between to align items with equal spacing between them, with the first and last items aligned to the container edges; and space-around for aligning the flex item with equal spacing around them, including the first and last items. Flex-start is the default value.

  • Align-items

This property has five values: stretch to scale up flex items to fill the whole width or height from cross start to cross end of the container; flex-start to stack items at the cross start; flex-end to stack items at the cross end; center to align items to the center of the cross axis; and baseline to align items so that their baselines are aligned. Stretch is the default value.

  • Align-content

This property aligns the lines of a flex container when there is additional space in the cross axis. Its values are: stretch to distribute space after every row; flex-start to stack items towards the cross start; flex-end to stack items towards the cross-end; center to stack items at the center of the cross axis; space-around to equally distribute space around flex items. The default value is stretch.

Flex item properties

Now that you know about Flexbox container properties, let’s look at the item properties:

  • Order

This property controls the order of appearance of the flex container’s children. They are ordered within the flex container by default.

.flex-item {

order: <integer>;

}

You can reorder flex items without having to restructure the HTML code. The default value is zero.

  • Align-self

This property enables the default alignment of a specific flex item to be overridden. You can use the values from align-items for this property.

.flex-item {

  align-self:  auto | flex-start | flex-end | center | baseline | stretch;

}

The auto value in align-self is computed by the value of the align-items on the element parent. If the element has no parent, the stretch is used instead.

Basic Examples

That’s all you need to know for using the CSS Flexbox grid layout. Now it’s time to practice what you learned. Here are some examples that show you how all these properties come together. Let’s begin with something absolutely simple:

.parent {

  display: flex;

  height: 300px;

}

 

.child {

  width: 100px; 

  height: 100px;

  margin: auto; 

}

This is an example of perfect centering. The height and width values can be changed as you wish. The key here is to set the margin to ‘auto’ so that the flex container automatically absorbs any extra space. Simple enough!

Now, let’s move on to adding some more properties: a list with six items of fixed dimensions that can be auto-sizable. They have to be evenly distributed to the horizontal axis.

.flex-container {

  display: flex;

  justify-content: space-around;

}

Next, let’s try to center a right-aligned navigation for medium-sized screens, and to make it single-columned on small devices.

/* Large */

.navigation {

  display: flex;

  flex-flow: row wrap;

  justify-content: flex-end;

}

 

/* Medium screens */

@media all and (max-width: 800px) {

  .navigation {

    justify-content: space-around;

  }

}

 

/* Small screens */

@media all and (max-width: 500px) {

  .navigation {

    flex-direction: column;

  }

}

Time to take this one step further! Let’s try a mobile-first layout with three columns, with a full-width footer and header and independent from source order.

.wrapper {

  display: flex;

  flex-flow: row wrap;

}

 

/* We tell all items to be 100% width */

.header, .main, .nav, .aside, .footer {

  flex: 1 100%;

}

 

/* We rely on source order for mobile-first approach*/

 

/* Medium screens */

@media all and (min-width: 600px) {

  .aside { flex: 1 auto; }

}

 

/* Large screens */

@media all and (min-width: 800px) {

  .main { flex: 2 0px; }

 

  .aside-1 { order: 1; }

  .main    { order: 2; }

  .aside-2 { order: 3; }

  .footer  { order: 4; }

}

Conclusion

These are just some basic examples. You can play around a lot more with CSS Flexbox grid layouts, and they are absolutely invaluable if you want to make a responsive webpage.

Recommended Articles

This has been a guide to Flexbox Essentials For Beginners. Here we discuss the basic concepts, covered some of the flex container properties along with a basic example. You can also go through our other suggested articles to learn more –

  1. HTML vs XML
  2. CSS3 vs CSS
  3. HTML vs CSS
  4. HTML5 vs Flash
Popular Course in this category
CSS Training (9 Courses, 9+ Projects)
  9 Online Courses |  9 Hands-on Projects |  61+ Hours |  Verifiable Certificate of Completion
4.5
Price

View Course
0 Shares
Share
Tweet
Share
Primary Sidebar
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2022 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA
Free Software Development Course

C# Programming, Conditional Constructs, Loops, Arrays, OOPS Concept

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more