Ordering your Flexbox

Flexbox is a really powerful module as it comes with several properties that you can customize. Let's quickly go over some more basics before we fully take the plunge and use Flexbox in Bootstrap. Let's start by talking about the order of child boxes. By default, they will appear in the order that you insert them in the HTML file. Consider the following code:

<div class="parent"> 
   <div class="child"> 
   1 
   </div> 
   <div class="child"> 
   2 
   </div> 
   <div class="child"> 
   3 
   </div> 
</div>

A proper CSS will produce a layout that looks like this:

Here's the CSS to produce this layout if you are following along at home:

.parent { 
  display: flex; 
  background: #ccc; 
  padding: 10px; 
  font-family: helvetica; 
} 
 
.child { 
  padding: 10px; 
  margin: 10px; 
  background: #fff; 
  flex-grow: 1; 
  text-align:center; 
  height: 100px; 
  line-height: 100px; 
}

Now using an order property we can reorder the children using some CSS. Let's put the third box at the beginning. If you are reordering some blocks, you need to define the position for each one; you can't simply enter the value for a single block. Add the following CSS to your style sheet:

.child:nth-of-type(1) { 
  order: 2; 
} 
.child:nth-of-type(2) { 
  order: 3; 
} 
.child:nth-of-type(3) { 
  order: 1; 
}

I'm using the nth-of-type pseudo selector to target each of the three boxes. I've then used the order property to set the third box to the first position. I've also adjusted the other two boxes to move them over one space. Save the file and your boxes should now look like this:

As you can see, the third box has moved to the first position. It's as easy as that to rearrange blocks on boxes on a page. I think you'll likely see how this could be useful for coding up a web application dashboard.

Stretching your child sections to fit the parent container

Another important Flexbox feature is the ability to stretch the width of the child boxes to fit the full-width of the containing parent. If you look at the preceding CSS you'll notice a flex-grow property on the .child class. The property is set to 1 which means that the child boxes will stretch to equally fill their parent. You could also do something where one box is set to a different value, using the nth-of-type selector, and then it would be wider than the others. Here's the code to create equal-width columns as that is what you'll likely do in most cases:

.child { 
   flex-grow: 1; 
}

Changing the direction of the boxes

By default in Flexbox, the child boxes will be in a row going left to right. If you like, you can change the direction using the flex-direction property. Let's try out a few different directions. First let's review our base HTML code again:

<div class="parent"> 
   <div class="child"> 
     1 
   </div> 
   <div class="child"> 
     2 
   </div> 
   <div class="child"> 
     3 
   </div> 
</div>

Here's the base CSS we wrote a little earlier. However, this time we'll add the flex-direction property (with a value of row-reverse)to the .parent class. This will reverse the order of the boxes:

.parent { 
  display: flex; 
  flex-direction: row-reverse; 
  background: #ccc; 
  padding: 10px; 
} 
 
.child { 
  padding: 10px; 
  margin: 10px; 
  background: #fff; 
  flex-grow: 1; 
  text-align:center; 
  height: 100px; 
  line-height: 100px; 
}

If you save the file and view it in a browser it should now look like this:

What if we wanted to order the boxes vertically so they were stacked on top of each other in descending order? We can do that by changing the flex-direction property to column:

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

That configuration will produce a grid that looks like this:

Finally there is one more direction we can try. Let's do the same vertically stacked grid but this time we'll reverse it. We do that by switching the flex-direction property to column-reverse:

.parent { 
   ... 
   flex-direction: column-reverse; 
}

That will produce a grid that looks like this:

Previous Chapter

3. Jumping into Flexbox

Next Chapter

Wrapping your Flexbox

Table of Contents for Bootstrap 4 – Responsive Web Design

Ordering your Flexbox

Stretching your child sections to fit the parent container

Changing the direction of the boxes

Table of Contents for
Bootstrap 4 – Responsive Web Design