Display flex with useful enhancements
horizontal lets you lay things out horizontally. It’s just display: flex with a few extra features.
The reason why we use horizontal over flex is because horizontal constructs a better image of the output.
<div class="horizontal"> <div>One</div> <div>Two</div> <div>Three</div></div>One
Two
Three
Justify Content with Flexbox
horizontal uses display:flex underneath the hood so you can use all the Flexbox properties you’re used to.
Start
One
Two
Three
Center
One
Two
Three
End
One
Two
Three
Space Around
One
Two
Three
Space Between
One
Two
Three
Align items with Flexbox
Aligning items is simple as well — just use what Flexbox already provides you with.
Stretch
One
Two
Three
Start
One
Two
Three
Center
One
Two
Three
End
One
Two
Three
Baseline
One
Two
Three
Control Spacing with spacer
We’ve added a spacer lets you create spaces between horizontal items. Think of it like justify-content: space-between but with more control. This can also be done by setting margin-left to auto.
<div class="horizontal"> <div>Logo</div> <div class="spacer">About</div> <div>Contact</div></div>Logo
About
Contact