Using Flexbox CSS Part 1

Flexbox or Flexible Box is a layout model in CSS used to easily align and order elements in an HTML page. To visualize it, flexbox is used to arrange boxes (components) inside a box (container). So you don’t have to code much in your CSS.

In previous styling models, designers use floats and design percentages to style inside boxes. But, gone are the days with Flexbox.

We could say that with Flexbox we:

  • say goodbye to floats
  • have a model that is responsive and mobile friendly
  • positioning children elements is now very easy
  • ordering elements would not require changes on HTML anymore

Let us dive in to some coding to see how Flexbox works. You can go over the code in scratchpad.

The basic Flexbox

<style>
  .box-container {
    display:flex;   
  }
  .box-container div {
    border: 1px solid #DDD;
    padding: 10px;
  }
  .box-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-1">
    <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-1">
    <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 will produce 3 boxes each having a 1 pixel border arranged horizontally.

Three boxes arranged horizontally.
3 boxes arranged horizontally

The Column Arranged Flexbox

If we alter the css such that we add the property flex-direction and set its value to column like for example:

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

The result is:

Three boxes arranged in column
3 boxes arranged in column

Flexbox widths

<style>
  .box-container {
    display:flex;
  }
  .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>

In the code above, we changed classes on two boxes such that they are now box-2 and box-3 respectively. After that, we style each div inside .box-container to have a 2 pixel margin on the left and right side. We then alter the styling by adding a flex property to the selectors box-1, box-2 and box-3 to 2, 1 and 1 respectively.

The result is:

Three boxes with a wider first box

So this goes to say that using the flex property we can set widths to our boxes. In our case, the whole container is now divided into 4 spaces (sum of the flex values) with the first box occupying two spaces (as set in it flex value of 2). The rest occupies only one space each since each has flex equal to 1.

Flexbox Ordering

We’ll try to alter the code above by setting the CSS styling for the 3 boxes to:

.box-1 {
    flex:2; 
    order: 2;
  }
  .box-2 {
    flex:1;
    order: 1;
  }
  .box-3 {
    flex:1;
    order: 3;
  }

The result would be

The boxes reordered

What we did is to add the order property to 2, 1, 3 to the selectors .box-1, .box-2 and box-3 respectively. In the result, we see that box 2 comes first. This is because, box-2 has order property equal to 1.

To recap, in this article we:

  • have the basic flexbox that has boxes arranged horizontally by adding display:flex to the CSS of the container’s selector
  • then we have the boxes arranged vertically by adding flex-direction property to the container’s selector and setting it to column
  • after that, we changed the box widths with the property flex and setting it to different integer values
  • we then changed the order of the boxes using the order property

So, there you go. A followup to this article will discuss more properties of Flexbox.

Please follow and like us: