A Simple Cheatsheet for Flexbox
Tags: webdev, cheatsheet, css, flexbox
Published: 2017-10-06 14:36:55

---
title: "A Simple Cheatsheet for Flexbox"
published: true
tags: Web Development,cheatsheet,CSS,flexbox
canonical_url: http://www.andreasreiterer.at/web-development/flexbox-cheatsheet/
---

_An overview on how to use the flexible box&nbsp;layout (short: flexbox)&nbsp;_

I spent the last days wrapping my head around&nbsp; **flexbox** , and how to use it correctly. Maybe you can relate to when I say, that it is not that easy to understand how it exactly works, or why some CSS rules don’t behave as expected under certain circumstances.

For me the following articles helped a lot to understand how flexbox works and what to consider when using it:

- [Understanding Flexbox: Everything you need to know](https://medium.freecodecamp.org/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af)&nbsp;([Ohans Emmanuel](https://medium.com/@ohansemmanuel))
- [11 things I learned reading the flexbox spec](https://hackernoon.com/11-things-i-learned-reading-the-flexbox-spec-5f0c799c776b)&nbsp;([David Gilbertson](https://medium.com/@david.gilbertson))

In this article, I just want to give a summary of what I think is important to know. So please keep in mind that this will not be an exhaustive description of all possible CSS rules and scenarios.

### What’s flexbox?
> Flexbox is a layout mode which is designed for laying out more complex applications and webpages.â€Š–â€Š[w3.org](https://www.w3.org/TR/css-flexbox-1/#intro)

When using the flexbox layout model we distinguish between the two main elements: flex container and flex items.

The flex container is the parent element of your flex items. You set&nbsp;`display: flex`&nbsp;or&nbsp;`display: inline-flex`&nbsp;on this element to activate the flex layout mode.

Before outlining the details of a flex container or flex items, I want to talk about the terminology of the flex box layout model, which I found somehow confusing in the beginning. Here’s what I found about that in the&nbsp;[flexbox specification](https://www.w3.org/TR/css-flexbox-1/#box-model):

&nbsp;

![](https://cdn-images-1.medium.com/max/1250/1*dH2D2U0yOf4a2Z_OYxRsKg.png)<figcaption>An illustration of the various directions, sizing and positioning terms as applied to a â€˜row’ flex container.</figcaption>

First of all, in&nbsp;flexbox layout there is no&nbsp;_horizontal_&nbsp;or&nbsp;_vertical_.&nbsp;Instead, we orientate ourselves by a&nbsp;_main axis_&nbsp;and a&nbsp;_cross axis_.

Flex items are always&nbsp;laid&nbsp;out along the&nbsp; **main-axis**. In the image above, you can see, that the main-axis for a&nbsp;_row_&nbsp;flex container goes from the left end of the flex container ( **_main start_** ) to the right end ( **_main end_** ).

> Basically, a column flex container is just a row flex container tilted by 90 degrees to the&nbsp;right.

&nbsp;

![](https://cdn-images-1.medium.com/max/750/1*_G8vYJ2P_l1CeRETSx43NQ.jpeg)<figcaption>An illustration of the various directions, sizing and positioning terms as applied to a â€˜column’ flex container.</figcaption>

For a&nbsp;_column_&nbsp;flex container things would look a bit different.

As you can see in the image on the left, as soon as you use&nbsp;`flex-direction: column`, the&nbsp;_main-axis_&nbsp;points towards the bottom of the screen, while the&nbsp;_cross-axis_&nbsp;goes from the right end to the left end of the flex container. So basically the whole picture is just tilted to the right, by 90 degrees.

This helped me a lot to orientate myself within a column flex container, since the CSS properties change their effective direction between&nbsp;_row_and&nbsp;_column_&nbsp;flex containers.

Now that’s all we need for now. In the following sections I’m going to describe the different CSS rules which are applicable for flex container and flex items.

### The Flex Container CSS&nbsp;Rules

Let’s start with the CSS rules which are used on the flex container. I included some screenshots and put the respective CSS setting into the caption of the images.

#### **flex-direction**

This rule determines if the flex-items are aligned in a row or in a column. Additionally, there is an option to align them in reverse order, heading from main-end to main-start.

&nbsp;

![](https://cdn-images-1.medium.com/max/1000/1*amKZ2KxBD-1huE56oIHHiQ.png)<figcaption>flex-direction: row; (default)</figcaption>

&nbsp;

![](https://cdn-images-1.medium.com/max/1000/1*LSl2HQ6FcCfqwVTIpHsiHA.png)<figcaption>flex-direction: column;</figcaption>

#### flex-wrap

If you add more flex-items to a line, you will get to the point where there is not enough space for more. Since the flex-items shrink by default (see: flex-shrink the flex-items section) the items will get smaller the more items you add. By using flex-wrap you can control this behaviour if the items should stay in the same line (this is the default behaviour;&nbsp;`flex-wrap: nowrap;`) or wrap to the next line (&nbsp;`flex-wrap: wrap;`&nbsp;or&nbsp;`flex-wrap: wrap-reverse;`)

&nbsp;

![](https://cdn-images-1.medium.com/max/1000/1*Q2Qc5OiAJrWhgWF6BHYIVQ.png)<figcaption>flex-wrap: nowrap; as as applied to a â€˜row’ flex-container</figcaption>

&nbsp;

![](https://cdn-images-1.medium.com/max/1000/1*4mpb0H6Dn2UK5uLFD9_rHg.png)<figcaption>flex-wrap: wrap;</figcaption>

#### flex-flow

This is the first shorthand I will show you today. You can combine the CSS rules&nbsp;_flex-direction_&nbsp;and&nbsp;_flex-wrap_&nbsp;within one single CSS rule. The following list should speak for itself:

- `flex-flow: row wrap;`
- `flex-flow: row wrap-reverse;`
- `flex-flow: column wrap;`
- `flex-flow: column wrap-reverse;`

#### justify-content

To position the flex-items alongside the main axis, you can use&nbsp;_justify-content_:

&nbsp;

![](https://cdn-images-1.medium.com/max/1000/1*GoU8Z5Jk0VZvgchlAoFZgQ.png)<figcaption>justify-content: flex-start; (default behaviour)</figcaption>

&nbsp;

![](https://cdn-images-1.medium.com/max/1000/1*GcJfvAx72fkZJaWiAxL6ug.png)<figcaption>justify-content: flex-end;</figcaption>

&nbsp;

![](https://cdn-images-1.medium.com/max/1000/1*bqgVSv8CYbd5sbqnHomfcQ.png)<figcaption>justify-content: center;</figcaption>

&nbsp;

![](https://cdn-images-1.medium.com/max/1000/1*xn5xnkoUNMtXcfsIs92JNw.png)<figcaption>justify-content: space-between;</figcaption>

&nbsp;

![](https://cdn-images-1.medium.com/max/1000/1*DSt6QAuAXPl4EpPKGpR7Gw.png)<figcaption>justify-content; space-around;</figcaption>

#### align-items

Now that you learned about justify-content to lay out items along the main axis, this is an easier one.&nbsp;_align-items_&nbsp;is used to align items&nbsp; **along the cross-axis** &nbsp; **on the current line**.

&nbsp;

![](https://cdn-images-1.medium.com/max/1000/1*_1XwY-xQJU6v82fKGueYwg.png)<figcaption>align-items: flex-start; (default behaviour)</figcaption>

![](https://cdn-images-1.medium.com/max/1000/1*MQyjqpuA3eIMUJEgUuecCg.png)<figcaption>align-items: flex-end;</figcaption>

&nbsp;

![](https://cdn-images-1.medium.com/max/1000/1*i9K2YX_EBDtxxmHP0FT2sg.png)<figcaption>align-items: center;</figcaption>

&nbsp;

![](https://cdn-images-1.medium.com/max/1000/1*d3yXuFZNDYal8GDv_NFUJA.png)<figcaption>align-items: stretch;</figcaption>

&nbsp;

![](https://cdn-images-1.medium.com/max/1000/1*DqQEdsCtWhfjWseSz8P_xQ.png)<figcaption>align-items: baseline;</figcaption>

As you see,&nbsp;_align-items_&nbsp;also allows to stretch items to use the available space in the current line, as well as&nbsp;`align-items: baseline;`aligns items along the bottom line of their first line of text.

But what do you do if you don’t want to align the items within one line, but rather align the whole bunch of items within the available space of the flex-container? That’s what&nbsp;_align-content_&nbsp;is used for.

#### align-content

Let’s have a look how we can align the whole bunch of&nbsp;_flex-items_&nbsp;within our flex container:

&nbsp;

![](https://cdn-images-1.medium.com/max/1000/1*aK6Y1x6s6tmNY68wjgEA9w.png)<figcaption>align-content: flex-start; (default behaviour)</figcaption>

&nbsp;

![](https://cdn-images-1.medium.com/max/1000/1*N3qM1kVTqPyqB6yWzcqPFg.png)<figcaption>align-content: flex-end;</figcaption>

&nbsp;

![](https://cdn-images-1.medium.com/max/1000/1*hX2F70c0MdZf2Xhof6E37g.png)<figcaption>align-content: center;</figcaption>

&nbsp;

![](https://cdn-images-1.medium.com/max/1000/1*iTMcb2NayM5YdDhWYCSEsA.png)<figcaption>align-conent; stretch;</figcaption>

That was a rather short overview of what you are capable to do with flex-container CSS rules. In the next section I’m going to show you how you can adjust the behaviour of flex-items.

### The Flex Item CSS&nbsp;Rules

In the last section you learned how to align all flex items at onceâ€Š–â€Šeither within their line or within the available space of their flex container. Now it’s time to have a look at&nbsp;`flex-grow`&nbsp;,`flex-shrink`&nbsp;,`flex-basis`&nbsp;and the&nbsp;`flex`&nbsp;shorthand for those three rules.

#### flex-grow

Defines if items cang row to use the available space along the main-axis. The default value is 0, which means that flex-items don’t grow automatically. In the following pictures you can see which effect flex-grow has on flex items in a â€˜row’ and in a â€˜column’ container.

&nbsp;

![](https://cdn-images-1.medium.com/max/1000/1*8I6rq-lPe9cUWyxtOU6ZsA.png)<figcaption>flex-grow: 0; (default behaviour) in a â€˜row’ container</figcaption>

&nbsp;

![](https://cdn-images-1.medium.com/max/1000/1*lSrfcRMbjsWOzZEmPIG-MQ.png)<figcaption>flex-grow: 1; in a â€˜row’ container</figcaption>

&nbsp;

![](https://cdn-images-1.medium.com/max/1000/1*X0P2Z46934QObV7nskeGCQ.png)<figcaption>flex-grow: 0; (default behaviour) in a â€˜column’ container</figcaption>

&nbsp;

![](https://cdn-images-1.medium.com/max/1000/1*Ak6iZ36xtiO98loOmWUEfA.png)<figcaption>flex-grow: 1; in a â€˜column’ container</figcaption>

With&nbsp;_flex-grow_&nbsp;it is also possible to let certain items grow more than others.

Example: We have three items. Two of them have flex-grow set to 1, while one of them got flex-grow set to 2.

<canvas width="75" height="13"></canvas> ![](https://cdn-images-1.medium.com/max/1000/1*WFNQhpqX_7GPh0SD4kJ3Tg.png)

What happened here? First of all, all flex-grow values of a line are added, which results in a total of 4 which represents 100% of our available space.

Then each item is sized according to the relational size of its flex-grow setting to the sum of all flex-grow settings of said line. According to that calculation, the first two items get 25% of the available space and the third one gets 50%. Please note that I did not consider the padding and margin which is set in the image.

#### **flex-shrink**

By default, the shrink rule is set to 1. This means that as soon as the window is resized, the flex items will shrink if necessary. Possible values are 0 and 1.

**Example:** &nbsp;The flex item of the following picture has a width of 500px. With flex-shrink set to it’s default value 1, resizing the window means that the item will shrink to less than 500px width. When setting flex-shrink to 0, the item will not shrink and would exceed the window size and a scrollbar appears.

&nbsp;

![](https://cdn-images-1.medium.com/max/1000/1*y-xL7-dpnWZs7oGwbpUUIQ.png)<figcaption>The item has a width of 500px. (Sidenote: flex-grow is switchedÂ off)</figcaption>

&nbsp;<canvas width="75" height="23"></canvas>

![](https://cdn-images-1.medium.com/max/1000/1*yCL3eUCd-KC-emVKyPigJA.png)<figcaption>flex-shrink is turned onâ€Š–â€Šresizing the window also resizes theÂ item.</figcaption>

<figcaption>
<p style="width: 321px"><img src="https://cdn-images-1.medium.com/max/1000/1*xcDvBTj8-fsuiqPlHE __sw.png" alt="" width="321" height="120" data-src="https://cdn-images-1.medium.com/max/1000/1*xcDvBTj8-fsuiqPlHE__ sw.png"><figcaption>flex-shrink turned off. The item exceeds the window (scrollbars omitted in thisÂ picture)</figcaption></p>
</figcaption>
#### flex-basis

The flex basis defines the initial&nbsp;_main-size_&nbsp;of a flex item. This setting will be evaluated before the available space is distributed to flex-grow, or the items are resized by flex-shrink.

> The initial main size of the flex item before free space is distributed to the flex factors.â€Š–â€Š[w3.org](https://www.w3.org/TR/css-flexbox-1/#flex-basis-property)

flex-basis accepts either a length in&nbsp;`px || em || rem`&nbsp;or percentages, as well as&nbsp;`auto`.

If flex-basis is set to&nbsp;`auto`, the width will be calculated based on content size. So the more you increase the content of a flex item, the bigger it gets.

As soon as you set a fixed size to flex-basis, the content of the item will adjust to fit into the item.

&nbsp;

![](https://cdn-images-1.medium.com/max/1000/1*jiePFv0eUl_DqRjCiP7Q2Q.png)<figcaption>flex-basis: auto;</figcaption>

&nbsp;

![](https://cdn-images-1.medium.com/max/1000/1*kCLeXxe2uimOLt0rjEZEGQ.png)<figcaption>flex-basis: auto; with moreÂ content</figcaption>

&nbsp;

![](https://cdn-images-1.medium.com/max/1000/1*wH-iTB9Hm2kDckwJYajaYw.png)<figcaption>flex-basis: 100px;</figcaption>

#### The flex shorthand

Because it is way more comfortable to set the above rules all at once, there is a shorthand to do so: The default setting for this is&nbsp;`flex: 0 1 auto;`

With the shorthand you define&nbsp; **_flex-grow_** &nbsp;with the&nbsp; **first** ,&nbsp; **_flex-shrink_** &nbsp;with the&nbsp; **second** , and **&nbsp;_flex-basis_&nbsp;** with the&nbsp; **third argument.**

It is also possible to omit the last parameter:&nbsp;`flex: 0 1`&nbsp;which defaults flex-basis to zero_._

The following pictures show some examples how you can arrange flex-items using the flex shorthand.

**flex: 0 1 auto (default behaviour)**  
The item size is defined by its content.

&nbsp;

![](https://cdn-images-1.medium.com/max/1000/1*-_OHfGSjTwuF5GMDEuYMJg.png)<figcaption>flex: 0 1 auto; (default behaviour)</figcaption>

**flex: 1 1 auto**

&nbsp;

![](https://cdn-images-1.medium.com/max/1000/1*dtjRc5zRutFWrHSsvSMugQ.png)<figcaption>flex: 1 1Â auto;</figcaption>

**flex: 0 0 auto**  
This is the same as the example in the above section “flex-shrink”. Shrinking is turned off, which leads to the item overflowing the window size.

&nbsp;

![](https://cdn-images-1.medium.com/max/1000/1*C0yZxme_Vj0dIZXUtR1GYA.png)<figcaption>flex: 0 0Â auto;</figcaption>

**Relative size of flex-items**  
To use the same “relative” sizing technique I described in the section “flex-grow”, you have to set flex-basis to zero. In the next picture, the first item has&nbsp;`flex: 2 1 0;`&nbsp;while the second item has&nbsp;`flex: 1 1 0;`

&nbsp;

![](https://cdn-images-1.medium.com/max/1000/1*qFW-emQqaJGV1ePBrgdFzQ.png)<figcaption>The first item got 2/3 of the available size while the second one gotÂ 1/3</figcaption>

### Conclusion

Well that article grew a bit bigger than it was planned, but in the end, I hope you enjoyed the read. Maybe this article can serve as a handy guide to look up the different CSS rules if you want to brush up your knowledge, as this is something one might not memorize completely.

As I said in the beginning, this was never meant to be an exhaustive list of scenarios and rules which can apply, if you are interested in this in detail, I would suggest to read the articles I mentioned in the beginning of the article, as well as parts of the specification (if you don’t want to read the whole thing)

- [Understanding Flexbox: Everything you need to know](https://medium.freecodecamp.org/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af)&nbsp;([Ohans Emmanuel](https://medium.com/@ohansemmanuel))
- [11 things I learned reading the flexbox spec](https://hackernoon.com/11-things-i-learned-reading-the-flexbox-spec-5f0c799c776b)&nbsp;([David Gilbertson](https://medium.com/@david.gilbertson))
- [CSS Flexible Box Layout Module Level 1](https://www.w3.org/TR/css-flexbox-1/)

At first, I planned to also create this as a handy cheatsheet, but then I found a&nbsp; **really good one** &nbsp;by&nbsp;[Chris Coyier](https://medium.com/@chriscoyier)&nbsp;which I want to share with you:

- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

### Call to Action
You want to learn more about web development and become a better developer? Good news! Subscribe to my [weekly newsletter](www.andreasreiterer.at/weekly-webdev-newsletter/) and I will deliver high quality content about web development right into your inbox.


_The post [A Simple Cheatsheet for Flexbox](http://www.andreasreiterer.at/web-development/flexbox-cheatsheet/) appeared first on [my blog](http://www.andreasreiterer.at)._