Categories
CSS Tutorials

Always align item to one side with Flexbox

Flexbox provides all kind neat solution to complex scenarios. We will use some properties of CSS Flexbox to properly align the orphan flex item.

Imagine you have the html form with two buttons. One is called submit and other one is called reset. The reset button resets the form to its initial state. These buttons are displayed on online by default. In order to display them on each end of the container, we just need to set it’s parent display to flex.

    <div class="container">
  <button>Reset</button>
  <button>Submit</button>
</div>
    .container {
  max-width: 400px;
  display: flex;
  justify-content: space-between;
}

With bit of CSS we get following results. space-between sets them far apart. Refer to this guide to find more about flexbox

Using space-between property of css flexbox

Flexbox Challenge

Now the challenge is if that the submit button should always appear on right side. Because when the form is empty we don’t want to show the reset button. As soon as I remove the reset button it snaps back to the left position according to normal document. This is due to space-between property of flexbox.

Solution

In order to achieve our desired result we need to add another element. Let’s call it spacer.

    <div class="container">
  <button>Reset</button>
  <div class="spacer"></div>
  <button>Submit</button>
</div>

The only css we add is flex-grow:1

    .spacer {
  flex-grow: 1;
}

There output is still the same but now if we comment the reset button we see our desired result

    <div class="wrapper">
  <!-- <button id="reset">Reset</button> -->
  <div class="spacer"></div>
  <button>Submit</button>
</div>
An image with a button indicates how flexbox flex-grow achieves the proper alignment

The signup button is always appears on the right. That’s because the spacer with takes all the unallocated space, thanks to the flex-grow:1 property.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.