DEV Community

Ibrahima Ndaw
Ibrahima Ndaw

Posted on • Updated on • Originally published at ibrahima-ndaw.com

CSS flexbox cheat sheet (with examples)

Originally posted on my blog


CSS flexbox makes it easier to design a flexible and responsive layout structure without using float or positioning.

flex-screenshot

Flex container

These following properties are applied to the flex container.

display

It transforms the container to a flexible one (flexbox) or inline flex container.

  • flex: This value will transform the elements of the container to flex items.

flex-screenshot

flex-direction

It specifies in which direction the main axis go.

  • row: it's the default, flex items will be displayed horizontally and the main axis will go from the left to the right side.

flex-screenshot

  • row-reverse: it's the same as row, except the order will be inverted and the main axis will go from the right to the left.

flex-screenshot

  • column: flex items will be displayed as a column (vertically) and the main direction will go from top to bottom.

flex-screenshot

  • column-reverse: it's the same as a column, except the order will be inverted and the main axis will go from bottom to top.

flex-screenshot

justify-content

It's used to control how the items should be positioned following the main axis.

  • center: This value will center all the items.

flex-screenshot

  • space-between: It will distribute the available space evenly between the items.

flex-screenshot

  • space-around: It will give each flex item the same amount of space on both left and right.

flex-screenshot

  • space-evenly: This value ensures that the space between flex items will be the same.

flex-screenshot

  • flex-start: it's the default, the items will be positioned at the start of the flex container.

flex-screenshot

  • flex-end: the items will be positioned at the end of the flex container.

flex-screenshot

align-items

It's used to control how the items should be positioned along the cross-axis.

  • stretch: it's the default, the flex items will be stretched along the cross axis.

flex-screenshot

  • center: This value will center the items along the cross axis.

flex-screenshot

  • flex-start: the items will be positioned at the start of the cross axis.

flex-screenshot

  • flex-end: the items will be positioned at the end of the cross axis.

flex-screenshot

flex-wrap

  • wrap: This value will put the overflowing items into a new line.

flex-screenshot

flex-flow

The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.

e.g: flex-flow: column wrap;

align-content

It does the same job as align-items, except this property aligns the flex container along the cross-axis if extra space is available.
Notice that the property will be applied only if the number of flex containers is more than one.

  • stretch: it's the default, flex containers stretch to take up the remaining space.

flex-screenshot

  • center: This value will center the flex container along the cross axis.

flex-screenshot

  • flex-start: the flex container will be positioned at the start of the cross axis.

flex-screenshot

  • flex-end: the flex container will be positioned at the end of the cross axis.

flex-screenshot

  • space-between: It will distribute the available space evenly between flex containers.

flex-screenshot

  • space-around: It will give each flex container the same amount of space on both left and right.

flex-screenshot

Flex Item

These following properties are applied to the flex item.

align-self

The property align-items sets the default alignment for all the flex items, align-self enables us to override this default alignment for an individual item.

  • auto: it's the default.

  • center: This value will center the flex item towards its container.

flex-screenshot

  • flex-start: the flex item will be positioned at the start of the cross axis.

flex-screenshot

  • flex-end: the flex item will be positioned at the end of the cross axis.

flex-screenshot

  • stretch: the flex item will be stretched along the cross axis.

flex-screenshot

order

The order property controls the order in which children of a flex container appear within the flex container. The value must be an integer.

e.g: order: -1;

flex-screenshot

flex-grow

It gives the flex item the ability to grow. The value must be positive.


e.g: flex-grow: 1;

flex-screenshot

flex-basis

It sets the flex basis, in other words the width.


e.g: flex-basis: 30%;

flex-screenshot

flex-shrink

It controls how a flex item can shrink.

flex-shrink:0 it will not shrink

flex-shrink:1 it will shrink.

e.g: flex-shrink:0

flex-screenshot

flex

We can simplify flex-grow, flex-basis flex-shrink with flex followed by them values.

e.g: flex: 0 30% auto

Top comments (7)

Collapse
 
rafaacioly profile image
Rafael Acioly

Nice, when i started learning about flexbox i played this game to learn;

flexboxfroggy.com/

Collapse
 
fly profile image
joon

Ditto

Collapse
 
ibrahima92 profile image
Ibrahima Ndaw

Great resource and thanks for sharing

Collapse
 
arahman1783 profile image
Abdelrahman Elhusseiny

Thanks, it is very helpful short guide

Collapse
 
fly profile image
joon

Personally I'm terrible at css, but just skimming through this gave me confidence to the point where I'm scared of myself. :)
Thank you dearly for the post. I'll be using this extensively.

Collapse
 
stephenparkhum profile image
S. Parker

Great write-up! Very helpful. :)

Collapse
 
abhishkh_sharma profile image
Learner

thanks man for info.