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.
With bit of CSS we get following results. space-between sets them far apart. Refer to this guide to find more about flexbox
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.
In order to achieve our desired result we need to add another element. Let’s call it spacer.
The only css we add is flex-grow:1
There output is still the same but now if we comment the reset button we see our desired result
signup button is always appears on the right. That’s because the spacer with takes all the unallocated space, thanks to the