• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to footer
EDUCBA

EDUCBA

MENUMENU
  • Resources
        • Java Tutorials

          • Cheat Sheet Java
          • Cheat Sheet Python
          • C# vs Js
        • Java Tutorials
        • Python Tutorials

          • Angular 5 vs Angular 4
          • Careers in Python
          • Kali Linux vs Ubuntu
        • Python Tutorials
        • Top Differences

          • Cheat Sheet JavaScript
          • Python Interview Questions
          • Cloud Computing or Virtualization
        • Top Differences
        • Others

          • Resources (A-Z)
          • Top Interview Question
          • Programming Languages
          • Web Development Tools
          • HTML CSS Tutorial
          • Technology Basics
          • Technology Careers
          • View All
  • Free Courses
  • All Courses
        • Certification Courses

          Software Development Course 2
        • All in One Bundle

          All-in-One-Software-Development-Bundle
        • Become a Python Developer

          Python-Certification-Training
        • Others

          • Java Course
          • Become a Selenium Automation Tester
          • Become an IoT Developer
          • Ruby on Rails Course
          • Angular JS Certification Training
          • View All
  • 600+ Courses All in One Bundle
  • Login

Flexbox Essentials For Beginners

Home » Software Development » Blog » Web Development Tools » Flexbox Essentials For Beginners

 

 flexbox properties

All About The flexbox properties

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.

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’.

Popular Course in this category
Cyber Week Sale
CSS Training (9 Courses, 7+ Projects) 9 Online Courses | 7 Hands-on Projects | 59+ Hours | Verifiable Certificate of Completion | Lifetime Access
4.5 (1,723 ratings)
Course Price

View Course

Related Courses
HTML Training (12 Courses, 17+ Projects)jQuery Training Training (8 Courses, 3+ Projects)Ruby on Rails Training (6 Courses, 4+ Projects)

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.

Recommended courses

  • Online Course on Free jQuery
  • Online Course on Free Angular JS
  • Online Training on Mudbox
  • Certification Training in Free Ruby

Flexbox Properties- 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.

Flexbox Properties- 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

So here are some articles that will help to get the more detail about the flexbox properties, flexbox code and also about the css flexbox grid so just go through the link which is given is given below.

  1. HTML vs XML – Top Differences
  2. CSS3 vs CSS – How Are They Different ? (Infograph)
  3. HTML vs CSS Top Differences
  4. HTML5 vs Flash

CSS Training (9 Courses)

9 Online Courses

7 Hands-on Projects

59+ Hours

Verifiable Certificate of Completion

Lifetime Access

Learn More

0 Shares
Share
Tweet
Share
Reader Interactions
Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar
Technology Blog Tutorials
  • Web Development Tools
    • Types of Web Hosting
    • Functional Testing Tools
    • CSS Flexbox Essentials
    • What is Adobe Muse
    • ETL Testing Tools
    • Web Designing Software
    • Website Developer Tools
    • Web Development Tools
    • Free Multimedia Software
    • Website Setup Mistakes
    • Website Architecture Diagramming Tools
    • Web Design Trends
    • Professional Level Web Page Design
    • IT Professional Tools
    • Web Designer Portfolio
    • Launching your Website
    • Web Performance Testing in Tools
    • Bug Reporting Tools
    • SOA Testing Tools
    • Web Designing Tools
    • Angular 2 Cheat Sheet
    • Online Website Builder
    • Software Tester Work
    • Free Web Page Designing Software
    • Website Design Layout
    • Icon Font Pack
    • Windows 10 Desktop Mode
    • Web Design and Development
    • What is JSON
    • Typography App
    • Web Design Tools
    • What is Ajax
    • Test Management Tools
  • Database Management (71+)
  • Ethical Hacking Tutorial (33+)
  • HTML CSS Tutorial (47+)
  • Installation of Software (54+)
  • Top Interview question (188+)
  • Java Tutorials (196+)
  • JavaScript (71+)
  • Linux tutorial (32+)
  • Network Security (85+)
  • Programming Languages (232+)
  • Python Tutorials (89+)
  • Software Development Basics (321+)
  • Software Development Careers (38+)
  • SQL Tutorial (33+)
  • String Functions (12+)
  • Technology Commands (38+)
  • Top Differences (368+)
  • Mobile App (60+)
Technology Blog Courses
  • HTML Training
  • Online jQuery Certification
  • Online Ruby on Rails Certification
Footer
About Us
  • Who is EDUCBA?
  • Sign Up
  •  
Free Courses
  • Free Course Programming
  • Free course Python
  • Free Course Java
  • Free Course Javascript
  • Free Course on SQL
  • Free Course on Web Design
  • Free HTML Course
  • Free Android App Development Course
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
  • Ruby on Rails Course
  • ASP.NET Course
  • VB.NET Course
  • Bootstrap Training Course
  • Become a Linux System Administrator
  • PHP Course
  • Joomla Training
  • HTML Course
Resources
  • Resources (A To Z)
  • Java Tutorials
  • Python Tutorials
  • Top Differences
  • Top Interview Question
  • Programming Languages
  • Web Development Tools
  • HTML CSS Tutorial
  • Technology Basics
  • Technology Careers
  • Ethical Hacking Tutorial
  • SQL Tutorials
  • Digital Marketing
Apps
  • iPhone & iPad
  • Android
Support
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions

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

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

By continuing above step, you agree to our Terms of Use and Privacy Policy.
*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

By continuing above step, you agree to our Terms of Use and Privacy Policy.
*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

By continuing above step, you agree to our Terms of Use and Privacy Policy.
*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

By continuing above step, you agree to our Terms of Use and Privacy Policy.
*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA

By continuing above step, you agree to our Terms of Use and Privacy Policy.
*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA Login

Forgot Password?

Let’s Get Started
Please provide your Email ID
Email ID is incorrect

Limited Period Offer - CSS Training (9 Courses) View More

Limited Period Offer - Limited Period Offer - CSS Training (9 Courses) View More