DEV Community

loading...

CSS flexbox cheat sheet (with examples)

ibrahima92 profile image Ibrahima Ndaw Originally published at ibrahima-ndaw.com Updated on ・5 min read

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

Discussion

pic
Editor guide
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 Author

Great resource and thanks for sharing

Collapse
faergeek profile image
Sergey Slipchenko

Would be cool to point out about some "quirks", like often needed min-width: 0 so that flex child does not extend because of it's contents. Didn't find good article containing that info yet :-( Frequent problem for newbies actually

Collapse
arahman1783 profile image
Abdelrahman Elhussini

Thanks, it is very helpful short guide

Collapse
stephenparkhum profile image
Stephen Parker

Great write-up! Very helpful. :)

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.