Orientation and Display order

As you already know, it's possible to place flex items in any direction along any axis. When is it necessary? Literally always, both for the whole page layout or for the element markup. You may find another solution for this problem, but it most likely will be setting a width for all the elements in CSS. Flexbox properties mentioned in this topic make the whole process much easier and more flexible. That's where the name 'flexbox' comes from.

Flex-direction

The flex-direction property belongs to the flex-container and is used to determine the direction in which flex items are placed. By default, it has a row value. That means all the elements are lining up in a row along the main axis from left to right. Here are other possible values:

• row is a default value.

• row-reverse value makes flex items line up in a row from right to left along the main axis.

  

• column value makes flex items line up in a column from top to bottom along the cross axis.

  

• column-reverse value makes flex items line up in a column from bottom to top along the cross axis

  

And here's the syntax example:

.flex-container {
  flex-direction: column;
}

Flex-wrap

If there are too many flex items inside one container, extra elements will first shrink to their minimal size (i.e. the size of the content) and then just go out of the borders of the container. Here are the 3 items which barely fit the container:

If we add one more item, their width will decrease a bit to fit the container even though it's determined in CSS:

Now, if we add a couple more items, their width will decrease to the size of their content. If there are still too many elements, they will overflow:

flex-wrap is a property that allows us to control overflow and make extra items either follow the rules described above or move to the next row (or column, if flex-direction: column; applied). It also belongs to the flex container.

flex-wrap: nowrap; is a default value that doesn't let items move to the next row and makes them stay in place even in case of overflow. Below you can see the three remaining properties:

• nowrap is a default value.

• wrap value makes overflow items move to the next line.

  

• wrap-reverse value for the flex-wrap property is used to reverse the direction of the cross-axis when wrapping occurs. This means that the flex items will be placed in the opposite order (item 5 and item 6 are moved to the upper line) when wrapping is necessary.

  

Flex-flow

flex-flow is a shorthand property combining flex-direction and flex-wrap. According to recommendations from Google on CSS code style, using shorthand properties is a good practice. That's why you should consider using flex-flow.

For example, the following HTML code will look like the picture below.

<div class="flex-container">
  <div class="flex-item">item 1</div>
  <div class="flex-item">item 2</div>
  <div class="flex-item">item 3</div>
  <div class="flex-item">item 4</div>
  <div class="flex-item">item 5</div>
  <div class="flex-item">item 6</div>
</div>

However, only if any of the code snippets below are applied.

.flex-container {
  flex-direction: row-reverse;
  flex-wrap: wrap;
}

.flex-container {
  flex-flow: row-reverse wrap;
}

Order

The order property belongs to flex items. Its value is a digit, its default value is order: 0; and it determines the display order of the items. The lower the value is, the earlier the item is displayed. In the example below all the items have the default order value except for the last one which has order: -1; property.

<div class="flex-container">
  <div class="flex-item item1">item 1</div>
  <div class="flex-item item2">item 2</div>
  <div class="flex-item item3">item 3</div>
</div>

.item3 {
  order: -1;
}

.flex-container {
  border: 1px solid #367af6;
  color: #367af6;
  display: flex;
  font-family: 'Montserrat', sans-serif;
  justify-content: center;
  padding: 0.5em 0 0.5em 0;
  width: 30em;  
}

.flex-item {
  border: 1px solid #367af6;
  flex-basis: 4em;
  height: 2em;
  line-height: 2em;
  margin: 0 .5em 0 .5em;   
  text-align: center;
}

The result of this code will be the following:

Now let's randomly change the order. The result of this code will look like the picture below.

<div class="flex-container">
  <div class="flex-item item1">item 1</div>
  <div class="flex-item item2">item 2</div>
  <div class="flex-item item3">item 3</div>
</div>

.item1 {
  order: 3;
}

.item2 {
  order: 1;
}

.item3 {
  order: 2;
}

.flex-container {
  border: 1px solid #367af6;
  color: #367af6;
  display: flex;
  font-family: 'Montserrat', sans-serif;
  justify-content: center;
  padding: 0.5em 0 0.5em 0;
  width: 30em;  
}

.flex-item {
  border: 1px solid #367af6;
  flex-basis: 4em;
  height: 2em;
  line-height: 2em;
  margin: 0 .5em 0 .5em;  
  text-align: center;
}

In the example above we used the number of the items as a max value. However, it's not necessary to have an order: N value for the item which has to be displayed Nth. The value just has to be higher than the value of the item which should be displayed before this one and lower than the value of the item which has to be displayed next.

If several items have the same order property value, they will be displayed in the same order as they are declared in HTML.

Here's an example:

<div class="flex-container">
  <div class="flex-item item1">item 1</div>
  <div class="flex-item item3">item 3</div>
  <div class="flex-item item2">item 2</div>
</div>

.item1 {
  order: 1;
}

.item2 {
  order: 1;
}

.item3 {
  order: 1;
}

.flex-container {
  border: 1px solid #367af6;
  color: #367af6;
  display: flex;
  font-family: 'Montserrat', sans-serif;
  justify-content: center;
  padding: 0.5em 0 0.5em 0;
  width: 30em;  
}

.flex-item {
  border: 1px solid #367af6;
  flex-basis: 4em;
  height: 2em;
  line-height: 2em;
  margin: 0 .5em 0 .5em;  
  text-align: center;
}

Below you can see the result:

Summary

Flexbox is controlled through flex container and flex items properties. flex-direction allows us to manipulate the axes and directions, flex-wrap helps to handle overflow elements, and the order property lets us manipulate the display order of the items. Also, there is a shorthand property combining flex-direction and flex-wrap. Now let's get down to practice!