Re-align anything with Flexbox

24 May, 2019

Real-life examples using The Flexible Box Module (Flexbox).

Aligning in CSS is not the easiest thing. Especially if you work on a responsive design. Flexbox fixes this problem in most cases. This tutorial will help you to understand how easy to use Flexbox in your project. If you have never used Flexbox , don’t worry. This tutorial will help you to start using flexbox and understand how it used in real projects.

How Safe is Flexbox?

Nothing to worry. The majority of browsers have fully implemented the flexbox spec. Take a look caniuse result:

As you can see, It’s absolutely safe to use flexbox. So why not to use it? In this tutorial, I will re-create some basic components from existing websites.

Example — Medium.com header using Flexbox.

This simple CSS code does the majic:

div { 
  display: flex; 
  flex:1; 
  align-items: baseline; 
}
div.left { flex:3; }

Some explanation about what’s happening here:

Flexbox uses two types of boxes: “flex containers” & “flex items”. Everything inside the flex container is a flex item. Flex container can manipulate all the flex items at once or individually.

In this example, Header container div is the flex container, everything inside the header is a flex item.

The flex property

As you can see I used flex: 1; in the container and flex: 3; in the left div. Basically flex is the shorthand for flex-grow.

It also accepts: flex-shrink and flex-basis properties. But those two are optional. In this case flex:1 means the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the free space in the flex container.

Full code is here:

HTML

<div>
  <div class="left">
    <a href="medium.com">
      <svg class="svgIcon-use" height="22" width="112" viewBox="0 0 111.5 22"><path d="M56.3 19.5c0 .4 0 .5.3.7l1.5 1.4v.1h-6.5V19c-.7 1.8-2.4 3-4.3 3-3.3 0-5.8-2.6-5.8-7.5 0-4.5 2.6-7.6 6.3-7.6 1.6-.1 3.1.8 3.8 2.4V3.2c0-.3-.1-.6-.3-.7l-1.4-1.4V1l6.5-.8v19.3zm-4.8-.8V9.5c-.5-.6-1.2-.9-1.9-.9-1.6 0-3.1 1.4-3.1 5.7 0 4 1.3 5.4 3 5.4.8.1 1.6-.3 2-1zm9.1 3.1V9.4c0-.3-.1-.6-.3-.7l-1.4-1.5v-.1h6.5v12.5c0 .4 0 .5.3.7l1.4 1.4v.1h-6.5zm-.2-19.2C60.4 1.2 61.5 0 63 0c1.4 0 2.6 1.2 2.6 2.6S64.4 5.3 63 5.3c-1.5 0-2.6-1.2-2.6-2.7zm22.5 16.9c0 .4 0 .5.3.7l1.5 1.4v.1h-6.5v-3.2c-.6 2-2.4 3.4-4.5 3.4-2.9 0-4.4-2.1-4.4-6.2 0-1.9 0-4.1.1-6.5 0-.3-.1-.5-.3-.7L67.7 7v.1H74v8c0 2.6.4 4.4 2 4.4.9-.1 1.7-.6 2.1-1.3V9.5c0-.3-.1-.6-.3-.7l-1.4-1.5v-.2h6.5v12.4zm22 2.3c0-.5.1-6.5.1-7.9 0-2.6-.4-4.5-2.2-4.5-.9 0-1.8.5-2.3 1.3.2.8.3 1.7.3 2.5 0 1.8-.1 4.2-.1 6.5 0 .3.1.5.3.7l1.5 1.4v.1H96c0-.4.1-6.5.1-7.9 0-2.7-.4-4.5-2.2-4.5-.9 0-1.7.5-2.2 1.3v9c0 .4 0 .5.3.7l1.4 1.4v.1h-6.5V9.5c0-.3-.1-.6-.3-.7l-1.4-1.5v-.2h6.5v3.1c.6-2.1 2.5-3.5 4.6-3.4 2.2 0 3.6 1.2 4.2 3.5.7-2.1 2.7-3.6 4.9-3.5 2.9 0 4.5 2.2 4.5 6.2 0 1.9-.1 4.2-.1 6.5-.1.3.1.6.3.7l1.4 1.4v.1h-6.6zm-81.4-2l1.9 1.9v.1h-9.8v-.1l2-1.9c.2-.2.3-.4.3-.7V7.3c0-.5 0-1.2.1-1.8L11.4 22h-.1L4.5 6.8c-.1-.4-.2-.4-.3-.6v10c-.1.7 0 1.3.3 1.9l2.7 3.6v.1H0v-.1L2.7 18c.3-.6.4-1.3.3-1.9v-11c0-.5-.1-1.1-.5-1.5L.7 1.1V1h7l5.8 12.9L18.6 1h6.8v.1l-1.9 2.2c-.2.2-.3.5-.3.7v15.2c0 .2.1.5.3.6zm7.6-5.9c0 3.8 1.9 5.3 4.2 5.3 1.9.1 3.6-1 4.4-2.7h.1c-.8 3.7-3.1 5.5-6.5 5.5-3.7 0-7.2-2.2-7.2-7.4 0-5.5 3.5-7.6 7.3-7.6 3.1 0 6.4 1.5 6.4 6.2v.8h-8.7zm0-.8h4.3v-.8c0-3.9-.8-4.9-2-4.9-1.4.1-2.3 1.6-2.3 5.7z"></path></svg>
    </a>
  </div>
  
  <div class="right">
    
    <span class="register">
      Became a member
    </span>
    <span class="sign-in">
      Sign in
    </span>
    <span class="cta">
      Get started
    </span>
  </div>
</div>

SCSS:

div {
  display: flex;
  flex:1;
  align-items: baseline;
  padding: 5px;
}

div.left {
  flex:3;
}

div.right{
  span {
    padding: 0 8px;
  }
  .register {
    color: rgba(0,0,0,.54);
  }
  .sign-in {
    color: #03a87c;
  }
  .cta {
    padding:3px 12px;
    border-radius: 4px;
    border:1px solid #03a87c;
    color: #03a87c;
  }
}

See this example live: https://codepen.io/malithmcr/pen/jXGLGx

Here is another example:

Example — IMDB user registraion page.

This example live: https://codepen.io/malithmcr/pen/MZEEyN

HTML:

<div class="main">
  <h1>IMDB</h1>
  <div class="form">
  <h3>Create account</h3>
  <div>
    <label>Your name</label>
    <input type="text">
  </div>
  <div>
    <label>Email</label>
    <input type="text">
  </div>
  <div>
    <label>Password</label>
    <input type="text" placeholder="at least 8 characters">
  </div>
    <div>
      <button>Continue</button>
  </div>
</div>
</div>

SCSS:

h1{
  text-align: center;
  background: #fbd666;
  padding: 10px;
  border-radius: 4px;
  font-family: arial;
  font-weight: 900;
}
div.main {
    display: flex;
    flex-direction: column;
    align-items: center;
}
div.form {
  padding: 30px 20px;
  border: 1px solid #d8d8d8;
  border-radius: 3px;
  min-width: 300px;
  label {
    font-weight: bold;
    font-size: 13px;
    font-family: arial;
  }
  input {
    width: 90%;
    margin: 10px 0;
    padding: 10px 14px;
    border-radius: 3px;
    border: 1px solid gray;
  }
  button {
    background: linear-gradient(to bottom,#f7dfa5,#f0c14b);
    width: 100%;
    padding: 8px;
    border: 1px solid gray;
    border-radius: 3px;
  }
}

If you thinking why am I creating the same elements from other websites, My answer is the best way to learn more about Flexbox is to align a bunch of HTML elements. The more you do the better you get at it.

Conclusion

The Flexbox properties are the next level of Float. Unlike Float, flexbox gives us full control over the alignments. Important to remember use display: flex; to enable the flexbox layout mode in the given box.

If you have any question? anything I should add or correct? feel free to comment below! Thank you for reading👏👏👏