{"componentChunkName":"component---src-templates-post-js","path":"/blog/flexbox-wrapping","result":{"data":{"markdownRemark":{"html":"

In my last post I explained flex-direction. In this post I will be explaining flexbox-wrap and order.

\n

flex-wrap

\n

By default the flex items will shrink if there is not enough room in container instead of moving to the next row. This happens because flex-wrap is set to nowrap by default and it stops flex items from wrapping.

\n

To understand how flex-wrap works, I am going to use the code below:

\n
<div class=\"container\">\n    <div class=\"box box1\">1</div>\n    <div class=\"box box2\">2</div>\n    <div class=\"box box3\">3</div>\n    <div class=\"box box4\">4</div>\n    <div class=\"box box5\">5</div>\n    <div class=\"box box6\">6</div>\n    <div class=\"box box7\">7</div>\n    <div class=\"box box8\">8</div>\n  </div>
\n
.container {\n  display: flex;\n  border: 10px solid #000000;\n}\n\n.box {\n  width: 33.333%;\n}
\n

One box will take up 33.333% width of the container. So, only 3 boxes should be present in first row. But if you check the output it looks like below:

\n
\n\t\n \n \"position\n \n\t
flex-wrap: nowrap | default
\n
\n

We can see that the boxes are shrinking themselves and staying in the first row. To change that we need to change flex-wrap to wrap. Then, the output would look something like below:

\n
\n \n \n \"position\n \n
flex-wrap: wrap
\n
\n

Now, we get the expected result. There is one more value for flex-wrap which is wrap-reverse. As expected, it reverses the flex items as seen in the output below:

\n
\n \n \n \"position\n \n
flex-wrap: wrap-reverse
\n
\n

order

\n

In Flexbox, we can change the order or precendence of individual flex items by applying the Flexbox property order. By default all flex items have order set to 0. If we set order of one box (say box 3) to 1 then it will appear after all the flex items which have order less than 1.\nLet's look an example here:

\n
.box3 {\n  order: 1;\n}
\n
\n \n \n \"position\n \n
order: 1
\n
\n

All the boxes except box 3 have order 0 so they appear before box 3. Similarly, if we change the order of box 5 to -1 then it will appear before all the boxes as seen below:

\n
.box5 {\n  order: -1;\n}
\n
\n \n \n \"position\n \n
order: -1
\n
\n

Order of flex items is a relative concept. The order of a flex item will depend upon the order of other flex items. For an example if you set the order of box 3 to 100, even then it does not imply that box 3 will appear last in this list. Box 3 will appear last on the list if and only if other boxes have order less than 100.

\n

Once again, I would like to remind that I am taking a free Flexbox course What The Flex Box by Wes Bos. It is a great course and you should check it out if you want to learn Flexbox.

","timeToRead":2,"frontmatter":{"title":"Understanding wrapping and ordering in Flexbox","date":"2017-10-16T00:00:00.000Z","tags":["CSS"]}}},"pageContext":{"slug":"flexbox-wrapping"}},"staticQueryHashes":["3649515864","63159454"]}