- \n
- Properties for flex containers (the parent)<\/li>\n
- Properties for flex items (the children)<\/li>\n<\/ol>\n
You\u2019ll learn all of them in this tutorial. But before you do, you should always think about browser support, so let\u2019s see what caniuse.com<\/a> has to say:<\/p>\n
![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/flexbox-browser-support.png\")
<\/a><\/p>\nThe most important info from this is:<\/p>\n
- \n
- 97.5%<\/strong> of users worldwide support Flexbox (if you use prefixing)<\/li>\n
- The main problems are IE11 and below, and older Android browsers<\/li>\n<\/ul>\n
The standard has evolved since 2009 which unfortunately brought forth three different specifications. Therefore, browser prefixes often look a bit different because they are based on different versions of the spec. Here\u2019s one example that also helps you spot outdated information on the web right away:<\/p>\n
- \n
- Spec from 2009:
display: box<\/code><\/li>\n- Spec from 2011:
display: flexbox<\/code><\/li>\n- Spec from 2016:
display: flex<\/code><\/li>\n<\/ul>\nNowadays, you make an element a Flexbox by setting
display: flex<\/code><\/strong> (ordisplay: inline-flex<\/code>). This allows you to use all the properties discussed in this tutorial.<\/p>\n1.1 \u00a0Main Axis & Cross Axis<\/h2>\n
It\u2019s essential to understand the concepts of main and cross axis for everything you do with Flexbox. For row layouts, the main axis will be the horizontal axis. For column layouts, the main axis will be vertical.<\/p>\n
The cross axis is always perpendicular to the main axis, thus vertical for rows and horizontal for columns. Keep this in mind for what\u2019s to come.<\/p>\n
2 \u00a0Styling Flex Containers<\/h2>\n
Let\u2019s take a look at the Flexbox properties to define the general layout of the flex container.<\/p>\n
2.1 \u00a0flex-direction<\/h2>\n
With Flexbox, you essentially have two choices for the basic behavior of your container: either row or column layout. Additionally, each can be \u201creversed\u201d. Let\u2019s see what that means.<\/p>\n
flex-direction: row<\/strong><\/code> (default)<\/p>\n![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/flex-direction-row.png\")
<\/a><\/p>\nThis is the default which behaves similar to left-floated elements in a container \u2013 but of course you\u2019ll be able to use all of the power of Flexbox on this container.<\/p>\n
flex-direction: column<\/strong><\/code><\/p>\n![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/flex-direction-column.png\")
<\/a><\/p>\nIn the column layout, elements will be aligned from top to bottom in a row. Each flex item will automatically take up the whole width.<\/p>\n
flex-direction: row-reverse<\/strong><\/code>
\n![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/flex-direction-row-reverse.png\")
<\/a><\/p>\nThis is the same as row but items are inserted from right to left (from the end of the main axis towards the front).<\/p>\n
flex-direction: column-reverse<\/strong><\/code><\/p>\n![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/flex-direction-column-reverse.png\")
<\/a><\/p>\nThis is the same principle as row-reverse but with the main axis now being the vertical axis.<\/p>\n
2.2 \u00a0justify-content<\/h2>\n
With justify-content, you can define the spacing of items along the main axis. Let\u2019s look at an example for a row layout.<\/p>\n
justify-content: flex-start<\/strong><\/code> (default)<\/p>\n![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/justify-content-flex-start.png\")
<\/a><\/p>\nHere, the flex items align towards the start of the main axis, which in this case is the left of the row.<\/p>\n
justify-content: flex-end<\/strong><\/code><\/p>\n![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/justify-content-flex-end.png\")
<\/a><\/p>\nIn this case, items align towards the end of the main axis. For
flex-direction: column<\/code>, this would be the bottom.<\/p>\njustify-content: center<\/strong><\/code><\/p>\n![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/justify-content-center.png\")
<\/a><\/p>\nI guess this is what you expected, right? \u00a0No surprises here.<\/p>\n
justify-content: space-around<\/strong><\/code><\/p>\n![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/justify-content-space-around.png\")
<\/a><\/p>\nThis distributes spacing between the flex items evenly, also leaving whitespace at the start and end.<\/p>\n
justify-content: space-between<\/strong><\/code><\/p>\n![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/justify-content-space-between.png\")
<\/a><\/p>\nWorks like space-around but without whitespace at the start and end of the main axis.<\/p>\n
2.3 \u00a0align-items<\/h2>\n
With align-items, you can change the alignment of elements along the cross axis.<\/p>\n
align-items: stretch<\/strong><\/code> (default)<\/p>\n![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/align-items-stretch.png\")
<\/a><\/p>\nBy default, all items in the flex box will stretch to take up all space available on the cross axis.<\/p>\n
align-items: flex-start<\/strong><\/code><\/p>\n![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/align-items-flex-start.png\")
<\/a><\/p>\nWith this, all flex items will be aligned towards the start of the cross axis. Note that\u00a0flex-start is not the default value here.<\/p>\n
align-items: flex-end<\/strong><\/code><\/p>\n![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/align-items-flex-end.png\")
<\/a><\/p>\nUsing flex-end will accordingly align all items to the end of the cross axis.<\/p>\n
What would that mean in the case where you have
flex-direction: column<\/code>? Then this would refer to the right-hand side of the container.<\/p>\nalign-items: center<\/strong><\/code><\/p>\n![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/align-items-center.png\")
<\/a><\/p>\nAs you would expect, this will align all items to the center of the cross axis. This is key to vertical centering<\/a> of arbitrary elements!<\/p>\n
align-items: baseline<\/strong><\/code><\/p>\n![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/align-items-baseline.png\")
<\/a><\/p>\nThis slightly more exotic value will align the flex items in a way that each of their content\u2019s baselines align. Thus, in the example above, the baselines of all texts align nicely.<\/p>\n
2.4 \u00a0flex-wrap<\/h2>\n
Use flex-wrap to let the container flow into multiple rows or columns.<\/p>\n
flex-wrap: nowrap<\/strong><\/code> (default)<\/p>\n![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/flex-wrap-nowrap.png\")
<\/a><\/p>\nIf you don\u2019t tell it otherwise, the flex box will not wrap its items into multiple rows or columns. This can cause the container to overflow as depicted above. In these cases, you should either reduce the content inside the flex box or use wrapping.<\/p>\n
flex-wrap: wrap<\/strong><\/code><\/p>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/flex-wrap-wrap.png\")
<\/a><\/p>\nWith this simple line, you let the flex container wrap into multiple rows or columns if it would otherwise overflow. Note that this will create a very basic grid layout \u2014 but you cannot really control what it will look like yet. Later, you\u2019ll learn how to control the sizes of each item.<\/p>\n
flex-wrap: wrap-reverse<\/strong><\/code><\/p>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/flex-wrap-wrapreverse.png\")
<\/a><\/p>\nThis one behaves like wrap, but rows and columns will be in reverse order \u2014 thus going from the end of the cross axis towards the start of the cross axis.<\/p>\n
2.5 \u00a0align-content<\/h2>\n
Once you have multiple rows or columns, you can easily define their alignment and spacing using align-content. For single row\/column layouts, this will no effect.<\/p>\n
The possible values are exactly the same as for justify-content, but this time it will define the alignment & spacing along the cross axis.<\/p>\n
align-content: flex-start<\/strong><\/code> (default)<\/p>\n![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/align-content-flex-start.png\")
<\/a><\/p>\nThis looks similar to align-items. However, align-items would in this case define the alignments per row or column<\/em>, not the alignment of all rows\/columns inside the container.<\/p>\n
align-content: flex-end<\/strong><\/code><\/p>\n![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/align-content-flex-end.png\")
<\/a><\/p>\nalign-content: center<\/strong><\/code><\/p>\n![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/align-content-center.png\")
<\/a><\/p>\nalign-content: space-around<\/strong><\/code><\/p>\n![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/align-content-space-around.png\")
<\/a><\/p>\nWith space-around, all rows or columns will be spaced evenly. Note the spacing before the first and after the last row in this example.<\/p>\n
align-content: space-between<\/strong><\/code><\/p>\n![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/align-content-space-between.png\")
<\/a><\/p>\nSimilar to above, space-between will space all rows\/columns evenly but will not add any spacing at the very start and end.<\/p>\n
Those are all properties that Flexbox has to offer to define the layout for flex containers<\/em>. You can see how powerful and easy to use it is \u2014 it just takes a while\u00a0to get used to all the different properties.<\/p>\n
For that, I very much recommend\u00a0Flexbox Froggy<\/a>, a set of fun exercises to try out these new CSS properties. It will only take 5 minutes, and it\u2019s a great way to try out Flexbox.<\/p>\n
For levels 14 and upwards, you\u2019ll need to be able to style flex items<\/em> as well. So here goes.<\/p>\n
3 \u00a0Styling Flex Items<\/h2>\n
In addition to the basic styles for flex containers, there are many ways you can control the behavior of each flex item. Some override the general layout from the container, others define how items can grow or shrink responsively.<\/p>\n
3.1 \u00a0order<\/h2>\n
With Flexbox, you can change the order of the flex items independent from the HTML markup. This allows more flexible layouts with less coupling to the HTML.<\/p>\n
order: 0<\/strong><\/code> (default)<\/p>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/order-default.png\")
<\/a><\/p>\nBy default, all flex items will have the order property set to 0. In particular, they have the same order value \u2014 therefore, their order in the layout will reflect their order in the HTML markup.<\/p>\n
order: -1 and order: 1<\/strong><\/code><\/p>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/order-example-1.png\")
<\/a><\/p>\nSince the default value is 0, you can use negative numbers to move an item to the front and positive numbers to move an item to the end (of the main axis).<\/p>\n
order: 1, 2, 3<\/strong><\/code><\/p>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/order-example-2.png\")
<\/a><\/p>\nThis way, you can also easily define a completely customized order by setting the order property for each item.<\/p>\n
3.2 \u00a0align-self<\/h2>\n
With align-self, Flexbox allows you to override the container\u2019s align-items<\/a> value. This is useful, for example, to make individual flex items stand out.<\/p>\n
Naturally, align-self allows the exact same values as align-items. Thus, you already know all five possible values:<\/p>\n
align-self: stretch<\/strong><\/code> (default)<\/p>\n![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/align-self-stretch.png\")
<\/a><\/p>\nThe item will stretch the whole cross axis, even if the container\u2019s align-items property was set to a different value.<\/p>\n
align-self: flex-start<\/strong><\/code><\/p>\n![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/align-self-flex-start.png\")
<\/a><\/p>\nThe selected item will be aligned to the beginning of the cross axis.<\/p>\n
align-self: flex-end<\/strong><\/code><\/p>\n![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/align-self-flex-end.png\")
<\/a><\/p>\nThe affected flex item will be aligned to the end of the cross axis.<\/p>\n
align-self: center<\/strong><\/code><\/p>\n![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/align-self-center.png\")
<\/a><\/p>\nThe selected item will be aligned at the center of the cross axis.<\/p>\n
align-self: baseline<\/strong><\/code><\/p>\n![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/align-self-baseline.png\")
<\/a><\/p>\nThe selected items will be aligned so that their baselines are on the same height. This once will make no difference if only one item uses baseline (this would appear like flex-start).<\/p>\n
3.3 \u00a0flex-grow<\/h2>\n
Now we get to the more interesting, and slightly more complicated part, part of Flexbox.<\/p>\n
The following three properties let you define the sizing of the flex items, depending on how much space is available. For instance, you can take up any remaining space, or let the items shrink if not enough space is available.<\/p>\n
Firstly, flex-grow allows flex items to take up remaining space along the main axis:<\/p>\n
flex-grow: 0<\/strong><\/code> (default)<\/p>\n![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/flex-grow-example-1.png\")
<\/a><\/p>\nUnless specified otherwise, flex items will not be allowed to grow. This is reflected by the default value of zero.<\/p>\n
flex-grow: 1<\/strong><\/code><\/p>\n![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/flex-grow-allowed.png\")
<\/a><\/p>\nYou can allow items to take up remaining space along the main axis simply by setting flex-grow to 1.<\/p>\n
flex-grow - Growing Evenly<\/strong><\/code><\/p>\n![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/flex-grow-evenly.png\")
<\/a><\/p>\nSetting flex-grow to 1 for all elements in a container will cause them to take up remaining space equally. This does not<\/em>\u00a0mean they will always have the same size.<\/p>\n
Flexbox will first consider how large the item is based on its content, padding etc \u2014 only then will it distribute the remaining space between the flex-items.<\/p>\n
flex-grow - Stronger Grow<\/strong><\/code><\/p>\n![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/flex-grow-example-2.png\")
<\/a><\/p>\nSetting a larger value for this property will make the affected item take up more space than the rest. More specifically, the third item here will get twice as much of the remaining space than the rest.<\/p>\n
Again, this doesn\u2019t mean the third item will be twice the size of the other items.<\/p>\n
flex-grow - Another Example<\/strong><\/code><\/p>\n![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/flex-grow-example-3.png\")
<\/a><\/p>\nTo exemplify this even further, consider the above example. Here, the third item will get 4\/7 of the space that remains.<\/p>\n
Why?<\/strong> Summing up all flex-grow values amounts to 7. So you can imagine that the remaining space is split up into 7 chunks which are then distributed between the items. Items 1, 2, and 4 will get 1 chunk each, whereas item 3 will get 4 chunks \u2014 reflecting their flex-grow value.<\/p>\n
3.4 \u00a0flex-shrink<\/h2>\n
This is the counterpart to flex-grow<\/a> and allows you to let items shrink of the container is overfull.<\/p>\n
flex-shrink: 1<\/strong><\/code> (default)<\/p>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/flex-shrink-default.png\")
<\/a><\/p>\nIn contrast to flex-grow, flex items will shrink by default if necessary. This is reflected by the default value of 1.<\/p>\n
flex-shrink: 0<\/strong><\/code><\/p>\n![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/flex-shrink-0.png\")
<\/a><\/p>\nSetting the property to zero will tell Flexbox that this item is no longer allowed to shrink, even if there\u2019s not much space.<\/p>\n
This can cause the container to overflow faster. But even with shrinking, the flex container can overflow, as seen under flex-wrap<\/a>.<\/p>\n
flex-shrink - Example<\/strong><\/code><\/p>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/flex-shrink-example.png\")
<\/a><\/p>\nSimilar to flex-grow, setting a larger value for flex-shrink will allow the item to shrink more than the rest.<\/p>\n
However, Flexbox will always shrink items only to some degree. The more content and padding it has, the less it can be shrunk. This is important to keep in mind when items are not getting smaller even if you set
flex-shrink: 999<\/code>.<\/p>\n3.5 \u00a0flex-basis<\/h2>\n
Instead of using width and height, the best practice is to use flex-basis when dealing with a flex box. For rows, flex-basis refers to width. For columns, it refers to height. In other words, it\u2019s always the size along the main axis.<\/p>\n
flex-basis: auto<\/strong><\/code><\/p>\n![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/flex-basis-auto.png\")
<\/a><\/p>\nJust like is the case for width and height, the default value for flex-basis is called auto. This way, the size of each item is defined purely by its content, padding, border, and margin.<\/p>\n
flex-basis - Pixel Values<\/strong><\/code><\/p>\n![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/flex-basis-px.png\")
<\/a><\/p>\nYou can use any dimensional value for flex-basis \u2014 again just like width and height. In this example, the eventual size of the items is equal to their flex-basis because enough space is available and flex-grow<\/a> is set to 0.<\/p>\n
flex-basis - Percentage Values<\/strong><\/code><\/p>\n - Spec from 2011:
- The main problems are IE11 and below, and older Android browsers<\/li>\n<\/ul>\n
- 97.5%<\/strong> of users worldwide support Flexbox (if you use prefixing)<\/li>\n