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.

<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

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. Alternatively, you can also set [--grow:1].

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

Overflowing content

If there’s not enough space to contain the children items, horizontal will overflow. When this happens, you can:

Use flow to wrap children elements.
Use scrollable-horizontal to create a scrolling container

<div class="flow">
  <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

spacer items can be used to create spaces between items in horizontal. You can think of it like justify-between but with more control over when to create a space.

This technique is often used to create layouts for navigation.

Tip

spacer is simply sets the margin-inline-start to auto, so you can do that if you prefer.

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

<div class="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 to 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 purchase a license to view this content

This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.

Get Layouts Get Basic Get Pro

If you already have a license, please login to access this content.

Here’s the CSS for horizontal.

.horizontal {
  display: flex;
  flex-direction: row;
  gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap));

  > .spacer {
    margin-inline-start: auto;
  }

  > *,
  > :where(.contents) > *,
  > *:where(astro-island, astro-slot) > * {
    flex-grow: var(--grow);
  }
}

Please purchase a license to view this content

This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.

Get Layouts Get Basic Get Pro

If you already have a license, please login to access this content.

horizontal

horizontal alignment

Class	Description
`justify-start`	Default value. 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-x`	`1rlh`	Gap between on the x-axis
`--gap-y`	`1rlh`	Gap between rows on the y-axis
`--gap`	`1rlh`	Gap between items on both axes. `--gap-x` and `--gap-y` will override this value.

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 purchase a license to view this content

This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.

Get Layouts Get Basic Get Pro

If you already have a license, please login to access this content.