Use Flexbox to Manage Space Ratios Instead of Using Percent Values

Feature thumb snip20170729 4

When you have a set of divs and you want to make one of the divs take up a higher percentage of the space than the other divs, a common practice used to be to use percents. However, with Flexbox you can leverage the flex property in order to manage a set of styles. This is an improvement over the traditional percent based approach because it can work better with responsive components and is less prone to errors.

Let's imagine you have two divs, as shown below:

If you want the div on the left to take up a larger portion of the page, you can set a default flex value in the .item class, such as:

.container {
  display: flex;
  .item {
    display: flex;
    flex: 1;
    justify-content: space-between;
    border: 1px solid grey;
    border-radius: 5px;
    margin-bottom: 10px;
    .content {
      display: flex;
      .metadata {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 20px;
        .title {
          margin: 0px;
        }
      }
    }
    .btn-group {
      display: flex;
      align-items: flex-end;
      align-items: center;
      .button {
        height: 100%;
        display: flex;
        align-items: center;
        flex-direction: row;
        width: 42px;
        justify-content: center;
        font-size: 2em;
        a {
          color: green;
          text-decoration: none;
        }
        &:hover {
          background-color: maroon;
          cursor: pointer;
          a {
           color: white; 
          }
        }
      }
    }
  }
}

 

And after updating the HTML div for the featured item with a new class, such as:

<div class='item featured'>

 

You can now tack the updated flex value onto the featured class, as shown here:

.item.featured {
  flex: 2;
}

 

And now the featured component will take up twice the allotted space as the other items, as shown here: