CSS flexbox cheat sheet (with examples)
Tags: css, codenewbie, webdev
Published: 2019-12-06 15:09:04

Originally posted on [my blog](https://www.ibrahima-ndaw.com/blog/css-flexbox-cheat-sheet/) <hr>

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

- [Flex container](#flex-container)
    - [display](#display)
    - [flex-direction](#flex-direction)
    - [justify-content](#justify-content)
    - [align-items](#align-items)
    - [flex-wrap](#flex-wrap)
    - [flex-flow](#flex-flow)
    - [align-content](#align-content)
- [Flex Item](#flex-item)
    - [align-self](#align-self)
    - [order](#order)
    - [flex-grow](#flex-grow)
    - [flex-basis](#flex-basis)
    - [flex-shrink](#flex-shrink)
    - [flex](#flex)
  
![flex-screenshot](https://drive.google.com/uc?id=1P2iItsQuzcnLLGtkgStxJB3-dAxVLRBh)

## 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. <br>
  - flex: This value will transform the elements of the container to flex items.

![flex-screenshot](https://drive.google.com/uc?id=13Z7HBN18WRgW6dYz1v2VX25BNSph0HTb)

### flex-direction
It specifies in which direction the main axis go.<br>

  - 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](https://drive.google.com/uc?id=13Z7HBN18WRgW6dYz1v2VX25BNSph0HTb)

  - 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](https://drive.google.com/uc?id=1ZdOeKBOThLdP26UwpMa6lFD85oz5ZvZN)

  - column: flex items will be displayed as a column (vertically) and the main direction will go from top to bottom.
  
![flex-screenshot](https://drive.google.com/uc?id=1BUT7uP4dNady5xZ-ZfJwthyJ2fO3993f)
  
  - 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](https://drive.google.com/uc?id=1byIjXvC5NB4rcuAq3I14bUW6A0cuUkID)
  
### justify-content
It's used to control how the items should be positioned following the `main axis`.<br>
  - center: This value will center all the items.

![flex-screenshot](https://drive.google.com/uc?id=1qEvfBXmuAv7ww9Vewwt0NV_nQJ_3WCiG)

  - space-between: It will distribute the available space evenly between the items.
  
![flex-screenshot](https://drive.google.com/uc?id=178UxBHTd-QYvQbv2A2eJhHHbCqcIiBbB)

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

![flex-screenshot](https://drive.google.com/uc?id=1pb6WJBBMqwYTqTHKDMyXM1idtPTHC_Ag)

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

![flex-screenshot](https://drive.google.com/uc?id=11hh6NkdqzGrYCECXgCAtcQbzAgXsA3Wt)

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

![flex-screenshot](https://drive.google.com/uc?id=1kcmEZnkySGmoSiZ9bQfGcOvdPmnA-WcE)

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

![flex-screenshot](https://drive.google.com/uc?id=1-zi-SZ41sVAwbWigjX-3HxkLnpGhhIMR)

### align-items
It's used to control how the items should be positioned along the `cross-axis`. <br>
  - stretch: it's the default, the flex items will be stretched along the cross axis.

![flex-screenshot](https://drive.google.com/uc?id=13Z7HBN18WRgW6dYz1v2VX25BNSph0HTb)

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

![flex-screenshot](https://drive.google.com/uc?id=14SyeWtjaUUcHJ3EXA8o-xnNw-NAOya-7)

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

![flex-screenshot](https://drive.google.com/uc?id=1CDvIZ8oMxjeKmof1vMpcw-AxFq_LCRns)

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

![flex-screenshot](https://drive.google.com/uc?id=1BGVadOF6fDERQCa5mj2bz9Mxcs7Gnvoa)

### flex-wrap
  - wrap: This value will put the overflowing items into a new line.

![flex-screenshot](https://drive.google.com/uc?id=1ErS55Asgb1UhN3KamtAJPhm-EAAg_5pV)

### flex-flow
The flex-flow property is a shorthand property for setting both the `flex-direction` and `flex-wrap` properties. <br>
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.<br>

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

![flex-screenshot](https://drive.google.com/uc?id=1QQ37JviL4IYFuLccKsw_w_CJeCWvoWz-)

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

![flex-screenshot](https://drive.google.com/uc?id=15kXY4aXIXIQ9KXtRq0S0E8Ubwj8TjGsr)

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

![flex-screenshot](https://drive.google.com/uc?id=12kGO3o7uMA-ijyOb5835grWqyuMsHun8)

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

![flex-screenshot](https://drive.google.com/uc?id=14UhtZVCdxZrqcM0-sPGb1Enxms81dQDM)

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

![flex-screenshot](https://drive.google.com/uc?id=1XERvqnBNmL5IzpQlcp5QkJqvB_qTBLpO)
  
  - space-around: It will give each flex container the same amount of space on both left and right.
  
![flex-screenshot](https://drive.google.com/uc?id=1jpR_GbyXhHL_wAVPwiL7l_8-ojijBSoW)
  
## 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.<br>
  - auto: it's the default.

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

![flex-screenshot](https://drive.google.com/uc?id=1Xa78W_Z3iHTkKX5YY-2zVm7I0NPPZMQ5)

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

![flex-screenshot](https://drive.google.com/uc?id=1XnXQ9ALpfJDvIA44MGGcxxjHOMFXiTKU)

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

![flex-screenshot](https://drive.google.com/uc?id=1j2CI4HYasbPBB3PB3-3afcdNDRvveuoQ)

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

![flex-screenshot](https://drive.google.com/uc?id=13Z7HBN18WRgW6dYz1v2VX25BNSph0HTb)

### 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. <br>
e.g: `order: -1;`

![flex-screenshot](https://drive.google.com/uc?id=1vdxhcGwrNoc-C9Y0TqWMnKpV_BZ8s5gH)

### flex-grow
It gives the flex item the ability to grow. The value must be positive.
<br>
e.g: `flex-grow: 1;`

![flex-screenshot](https://drive.google.com/uc?id=1M4nnhbxp5TbqN9Iy3SyzPwpntydpRMtH)

### flex-basis
It sets the flex basis, in other words the width.
<br>
e.g: `flex-basis: 30%;`

![flex-screenshot](https://drive.google.com/uc?id=1uGqQU36dmLrYg0OtN0yVLIIPVdRTOg4-)

### flex-shrink
It controls how a flex item can shrink.<br>
`flex-shrink:0` it will not shrink <br>
`flex-shrink:1` it will shrink.<br>
e.g: `flex-shrink:0`

![flex-screenshot](https://drive.google.com/uc?id=13qatKrhIGMrdTjocIm96gwNtS2suDp8N)

### flex
We can simplify `flex-grow`, `flex-basis` `flex-shrink` with `flex` followed by them values. <br>
e.g: `flex: 0 30% auto`

| [TWITTER](https://twitter.com/ibrahima92_) | [BLOG](https://www.ibrahima-ndaw.com/) | [NEWSLETTER](https://ibrahima-ndaw.us5.list-manage.com/subscribe?u=8dedf5d07c7326802dd81a866&id=5d7bcd5b75) | [GITHUB](https://github.com/ibrahima92) | [LINKEDIN](https://www.linkedin.com/in/ibrahima-ndaw/) | [CODEPEN](https://codepen.io/ibrahima92) | [DEV](https://dev.to/ibrahima92) |
| -------------- | ------------------------------------------ | ----------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------------------------- | ------------------------------------------------------ | ---------------------------------------- | -------------------------------- |