Author

Author

Tarun

Visit Profile

Jump to Topic 👇

Article you may like

Min-width and Max-width

Flexbox: The Flexible Box Layout Model ~ Complete Guide

It is a CSS layout mode that provides an easy and clean way to arrange items in a container.

It doesn’t use any float property and it’s responsive, which makes our job easier to position elements.

Flexbox Grid

Display Flex

You can make any container flex by setting its display property to flex:

div {
  display: flex;
}

This code will also arrange all items inside the container in a row.

Display Set to Flex

Flex Direction

Don’t worry, you can change the flex direction by using the following property:

div {
  display: flex;
  flex-direction: column;
}
Change flex-direction

You can select any of these directions:

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

Justify Content

This property aligns items horizontally and accepts the following values:

justify-content: flex-start; 
/* Items align to the left side of the container. */
flex-start
justify-content: flex-end; 
/* Items align to the right side of the container. */
flex-end
justify-content: center; 
/* Items align at the center of the container. */
center
justify-content: space-between; 
/* Items display with equal spacing between them. */
space-between
justify-content: space-around; 
/* Items display with equal spacing around them. */
space-around

Align Items

This CSS property aligns items vertically and accepts the following values:

align-items: flex-start; 
/* Items align to the top of the container. */
Align Items: flex-start
align-items: flex-end; 
/* Items align to the bottom of the container. */
Align Items: flex-end
align-items: center; 
/* Items align at the vertical center of the container. */
Align Items: center

Try mixing both justify-content & align-items properties.

Order

Sometimes reversing the row or column order of a container is not enough. In these cases, we can apply the order property to individual items. By default, items have a value of 0, but we can use this property to also set it to a positive or negative integer value (-2, -1, 0, 1, 2).

Default Positions
order: 2;
After changing order

Align Self

Another property you can apply to individual items is align-self. This property accepts the same values as align-items and its value for the specific item.

Adding different align-self properties to all divs

Flex Wrap

The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction in that lines are stacked.

flex-wrap: nowrap; 
/* The flex items are laid out in a single line which may cause the flex container to overflow. */
nowrap
flex-wrap: wrap; 
/* The flex items break into multiple lines. */
wrap
flex-wrap: wrap-reverse; 
/* Gives us the opposite output of wrap property. */
wrap-reverse

Flex Flow

The two properties flex-direction and flex-wrap are used so often together that the shorthand property flex-flow was created to combine them. This shorthand property accepts the value of the two properties separated by a space.

flex-flow: column wrap;
Flex Direction & Flow Together

Try finding and playing with more properties of flexbox.

You also have some fun and interesting games to learn flexbox, like Flexbox Froggy & Flexbox Defense, etc.

Watch Video Tutorial