Horizontal

Horizontal lets you lay things out horizontally.

Display flex with useful enhancements

Horizontal lets you lay things out horizontally. It’s display: flex but with a few extra features.

It just sounds… more descriptive (and more memorable) compared to flex.

<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

Spacer lets you create spaces between Horizontal items. Think of it like justify-content: space-between but with more control.

<div class="Horizontal">
  <div>Logo</div>
  <div class="Spacer">About</div>
  <div>Contact</div>
</div>

Logo

About

Contact

Basic Usage

Horizontal lets you lay things out horizontally. It’s basically just display: flex with a couple of enhancements.

<div class="Horizontal">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

Justifying Content

Since Horizontal is just display:flex, you can use justify-content to align items horizontally.

<div class="Horizontal justify-start">...</div>
<div class="Horizontal justify-center">...</div>
<div class="Horizontal justify-end">...</div>
<div class="Horizontal justify-space-around">...</div>
<div class="Horizontal justify-space-between">...</div>

<div class="Horizontal" style="justify-content: start">...</div>
<div class="Horizontal" style="justify-content: center">...</div>
<div class="Horizontal" style="justify-content: end">...</div>
<div class="Horizontal" style="justify-content: space-around">...</div>
<div class="Horizontal" style="justify-content: space-between">...</div>

Aligning Items

Likewise, you can use align-items to align items vertically.

<div class="Horizontal items-stretch">...</div>
<div class="Horizontal items-start">...</div>
<div class="Horizontal items-center">...</div>
<div class="Horizontal items-end">...</div>
<div class="Horizontal items-baseline">...</div>

<div class="Horizontal" style="align-items: stretch">...</div>
<div class="Horizontal" style="align-items: start">...</div>
<div class="Horizontal" style="align-items: center">...</div>
<div class="Horizontal" style="align-items: end">...</div>
<div class="Horizontal" style="align-items: baseline">...</div>

Changing Gap

You can change the gap between items with the gap property or the --gap variable.

<div class="Horizontal gap-8">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<div class="Horizontal" style="--gap:2rem">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

Expanding items

Items can be expanded to stretch the available width if you add flex-grow to the item.

<div class="Horizontal">
  <div>One</div>
  <div class="flex-grow">Two</div>
  <div>Three</div>
</div>

Overflowing

Horizontal does not constraint the width of its children. If there is not enough space to contain them, the children will overflow out of its container.

To allow users to scroll through the content, use Scrollable. (It’s more than just overflow: scroll).

<div class="Horizontal">
  <div>LongerItem</div>
  <div>SecondLongerItem</div>
  <div>ThirdLongerItem</div>
</div>

<div class="Horizontal Scrollable-horizontal">
  <div>LongerItem</div>
  <div>SecondLongerItem</div>
  <div>ThirdLongerItem</div>
</div>

Spacer Items

Horizontal can have Spacer items to create spaces between the current item and the previous ones. You can think of it like justify-between but with more control.

This technique is often used to create layouts for navigation.

Note

Spacer is simply sets the left margin to auto. (To be more precise, we set margin-inline-start).

<div class="Horizontal">
  <div>Logo</div>
  <div class="Spacer">About</div>
  <div>Contact</div>
</div>

<div class="Horizontal Scrollable-horizontal">
  <div>Logo</div>
  <div class="ms-auto">About</div>
  <div>Contact</div>
</div>

One neat thing about Spacer is you can treat it like an item. It’s super useful when you’re developing (and still unsure of the final layout).

<div class="Vertical md:Horizontal">
  <div>Logo</div>
  <div class="Spacer"></div>
  <div>About</div>
  <div>Contact</div>
</div>

Vertical -> Horizontal

One of the most common responsive tactics is to switch from a Vertical layout to a Horizontal layout when there is enough space.

You can use Tailwind Responsive modifiers to do this.

<div class="Vertical md:Horizontal">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Here’s the CSS for Horizontal.

.Horizontal {
  display: flex;
  flex-direction: row;
  gap: var(--gap, 1rem);
  max-width: 100%;

  .Spacer {
    margin-inline-start: auto;
  }
}

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Horizontal

Note

The justify-*, items-* and self-* classes below require Tailwind. If you don’t use Tailwind, you need to install our utilities to make these work.

Horizontal alignment

Class	Description
`justify-start`	Aligns children items to the left.
`justify-center`	Aligns children items to the center.
`justify-end`	Aligns children items to the right.
`justify-around`	Distributes spaces equally around items
`justify-between`	Distributes space equally between items

Vertical alignment

Class	Description
`items-stretch`	Default value. Stretch items.
`items-start`	Aligns items to the top.
`items-center`	Aligns items to the vertical center.
`items-end`	Aligns items to the bottom.
`items-baseline`	Aligns items to the baseline.

CSS Variables

Variable	Default	Description
`--gap`	1rem	Gap between items

Children

Horizontal alignment

Class	Description
`Spacer`	Creates a gap between this item and the one before

Vertical Alignment

Class	Description
`self-start`	Aligns item to the top.
`self-center`	Aligns item to the vertical center.
`self-end`	Aligns item to the bottom.
`self-stretch`	Default value. Stretches the item.
`self-baseline`	Aligns self to the baseline.

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.