Using Flexbox CSS Part 2

Flexbox CSS in part 1 discusses about its use in aligning boxes inside a container. It further discusses arranging boxes vertically or horizontally. Another part discusses widths of the boxes and how we order the boxes inside the container.

In this article, we are going to discuss:

  • aligning boxes inside the container
  • justifying contents
  • making flexbox css responsive and mobile friendly
  • flex wrapping

Aligning Boxes Inside the Container

To align boxes inside container needs to add the align-items property to the container selector. Such that:

<style>
  .box-container {
    display:flex;
    align-items:flex-start;
  }
  .box-container div {
    border: 1px solid #DDD;
    padding: 10px;
    margin:0px 2px;
  }
  .box-1 {
    flex:2; 
  }
  .box-2 {
    flex:1;
  }
  .box-3 {
    flex:1;
  }
</style>
<div class="box-container">
  <div class="box-1">
    <h3>This is Box 1</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box-2">
    <h3>This is Box 2</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box-3">
    <h3>This is Box 3</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
</div>

There are three possible values of the align-items property. Namely, they are flex-start, flex-end or center. When a flex-start is used like the code above, the resulting boxes would look like:

align-items:flex-start
Flexbox align-items:flex-start

To learn further, you may just experiment with the other values and see what happens.

Justifying Contents

Another feature of Flexbox CSS, is justifying contents. This is done inside the container by adding justify-content property to the container selector.

<style>
  .box-container {
    display:flex;
    justify-content:center;
  }
  .box-container div {
    border: 1px solid #DDD;
    padding: 10px;
    margin: 0 2px; 
  }
  .box {
    flex-basis:20%;
  }
</style>
<div class="box-container">
  <div class="box">
    <h3>This is Box 1</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box">
    <h3>This is Box 2</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box">
    <h3>This is Box 3</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
</div>

The code above has all the boxes having flex-basis equal to 20%. This property (flex-basis) is equivalent to width. In fact, some implementations use the width property. Furthermore, the boxes are enclosed in a container that has a property justify-content. And this property is set to center. The resulting HTML when rendered may look something like this:

justify-content: center
Flex boxes justified center.

Other possible values of justify-content are: flex-start, flex-end and space-between and space-around. You may experiment with these values by replacing the above code.

A particular value that is very much useful is space-around. If you use space-around, you may not have the margin property of the boxes anymore. Unlike space-between, this will also add a space on the start and end part.

Making Flexbox Reponsive and Mobile Friendly

If we’re going to resize our browser to simulate responsiveness, we will see that flexbox by default isn’t really responsive. To remedy this, we need to enclose our container selector inside a media query. For example:

@media(min-width:768px){
    .box-container {
      display:flex;
      justify-content:space-around;
    }
  }

The media query will implement only flexbox if the screen is wider than 768 pixels. You may even add another media query such that if the screen width is lesser than that, it will flex vertically. That is, we use flex-direction: column for the container selector.

Content Wrapping

What about if we have a lot of boxes inside the container? Comes now the flex-wrap property. If we set it to wrap, a new row of boxes will be created if the current row is filled up. For example:

<style>
  .box-container {
    display:flex;
    justify-content:space-around;
    flex-wrap: wrap;
  }
  
  .box-container div {
    border: 1px solid #DDD;
    padding: 10px;
    margin: 5px 0px
  }
  .box {
    flex-basis:20%;
  }
</style>
<div class="box-container">
  <div class="box">
    <h3>This is Box 1</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box">
    <h3>This is Box 2</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box">
    <h3>This is Box 3</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box">
    <h3>This is Box 4</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box">
    <h3>This is Box 5</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box">
    <h3>This is Box 6</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box">
    <h3>This is Box 7</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box">
    <h3>This is Box 8</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
</div>

When implemented, the above code will look like:

flexbox wrapping
Flexbox CSS wrapping

So, there you have it: our two part notes for Flexbox.

Please follow and like us: