Splendid layouts

Horizontal

horizontal lets you lay things out horizontally.

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.

index.html
<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.

index.html
<div class="horizontal">
  <div>Logo</div>
  <div class="spacer">About</div>
  <div>Contact</div>
</div>
Logo
About
Contact