Horizontal Layout

Horizontal Layout places components side-by-side in a row.

Vertical Alignment
Horizontal Alignment
Spacing
Padding
Margin
Expanding Items

Horizontal Layout places components side-by-side in a row. By default, it defines its width and height automatically, determined by the components it contains (i.e., it “hugs” the content).

See Vertical Layout for placing components top-to-bottom.

Open in a
new tab
<vaadin-horizontal-layout theme="spacing padding">
  <vaadin-button>Button 1</vaadin-button>
  <vaadin-button>Button 2</vaadin-button>
  <vaadin-button>Button 3</vaadin-button>
</vaadin-horizontal-layout>

Components in a Horizontal Layout can be aligned horizontally, as you’d expect, but also vertically.

Vertical Alignment

You can position components at the top, middle, or bottom. You can also stretch items or position them along the text baseline in the layout.

Open in a
new tab
<vaadin-horizontal-layout
  theme="spacing padding"
  style="align-items: center"
>
  <vaadin-text-area label="Text area 1"></vaadin-text-area>
  <vaadin-text-area label="Text area 2"></vaadin-text-area>
  <vaadin-text-area label="Text area 3"></vaadin-text-area>
</vaadin-horizontal-layout>

Value Description

Value	Description
`STRETCH` (default)	Vertically stretches items that have undefined height.
`START`	Positions items at the top of the layout.
`CENTER`	Centers items, vertically.
`END`	Positions items at the bottom of the layout.
`BASELINE`	Positions items along the layout’s text baseline.

STRETCH (default)

Vertically stretches items that have undefined height.

START

Positions items at the top of the layout.

CENTER

Centers items, vertically.

END

Positions items at the bottom of the layout.

BASELINE

Positions items along the layout’s text baseline.

It’s also possible to set a different vertical alignment for individual items by overriding the general alignment setting of the layout.

Open in a
new tab
<vaadin-horizontal-layout
  theme="spacing padding"
  style="align-items: stretch"
>
  <vaadin-text-area
    label="Text area 1"
    style="align-self: start"
  ></vaadin-text-area>
  <vaadin-text-area label="Text area 2"></vaadin-text-area>
  <vaadin-text-area
    label="Text area 3"
    style="align-self: end"
  ></vaadin-text-area>
</vaadin-horizontal-layout>

Horizontal Alignment

Components in a Horizontal Layout can be left-aligned, centered or right-aligned. You can also position components by specifying how the excess space in a layout is distributed among them.

Open in a
new tab
<vaadin-horizontal-layout theme="spacing padding" style="justify-content: center">
  <vaadin-button>Button 1</vaadin-button>
  <vaadin-button>Button 2</vaadin-button>
  <vaadin-button>Button 3</vaadin-button>
</vaadin-horizontal-layout>

Value Description

Value	Description
`START` (default)	Left-aligns for left-to-right language items. For right-to-left languages, right-aligns items.
`CENTER`	Centers items, horizontally.
`END`	Right-aligns for left-to-right language items. For right-to-left languages, left-aligns items.
`BETWEEN`	Available space is distributed evenly between items. No space is added before the first item, or after the last.
`AROUND`	Available space is distributed evenly around items. The space before the first item and after the last, is half of that between items.
`EVENLY`	Available space is distributed evenly between items. The space before the first item, between items, and after the last item is the same.

START (default)

Left-aligns for left-to-right language items. For right-to-left languages, right-aligns items.

CENTER

Centers items, horizontally.

END

Right-aligns for left-to-right language items. For right-to-left languages, left-aligns items.

BETWEEN

Available space is distributed evenly between items. No space is added before the first item, or after the last.

AROUND

Available space is distributed evenly around items. The space before the first item and after the last, is half of that between items.

EVENLY

Available space is distributed evenly between items. The space before the first item, between items, and after the last item is the same.

Spacing

Spacing is used to create space among components in the same layout. Spacing can help prevent misclicks and distinguish content areas.

Open in a
new tab
@state()
private theme = 'spacing';

protected override render() {
  return html`
    <vaadin-horizontal-layout theme="${this.theme} padding" style="align-items: stretch">
      <vaadin-button>Button 1</vaadin-button>
      <vaadin-button>Button 2</vaadin-button>
      <vaadin-button>Button 3</vaadin-button>
    </vaadin-horizontal-layout>
    <vaadin-radio-group
      label="Spacing"
      .value="${this.theme}"
      @value-changed="${(event: RadioGroupValueChangedEvent) => {
        this.theme = event.detail.value;
      }}"
    >
      <vaadin-radio-button value="spacing" label="Enabled"></vaadin-radio-button>
      <vaadin-radio-button value="" label="Disabled"></vaadin-radio-button>
    </vaadin-radio-group>
  `;
}

Five different spacing theme variants are available:

Open in a
new tab
@state()
private themeVariant = 'spacing-xl';

protected override render() {
  return html`
    <vaadin-horizontal-layout theme="${this.themeVariant} padding" style="align-items: stretch">
      <vaadin-button>Button 1</vaadin-button>
      <vaadin-button>Button 2</vaadin-button>
      <vaadin-button>Button 3</vaadin-button>
    </vaadin-horizontal-layout>
    <vaadin-radio-group
      label="Spacing variant"
      .value="${this.themeVariant}"
      @value-changed="${(event: RadioGroupValueChangedEvent) => {
        this.themeVariant = event.detail.value;
      }}"
    >
      <vaadin-radio-button value="spacing-xs" label="spacing-xs"></vaadin-radio-button>
      <vaadin-radio-button value="spacing-s" label="spacing-s"></vaadin-radio-button>
      <vaadin-radio-button value="spacing" label="spacing"></vaadin-radio-button>
      <vaadin-radio-button value="spacing-l" label="spacing-l"></vaadin-radio-button>
      <vaadin-radio-button value="spacing-xl" label="spacing-xl"></vaadin-radio-button>
    </vaadin-radio-group>
  `;
}

Theme Variant Usage Recommendation

Theme Variant	Usage Recommendation
`spacing-xs`	Extra-small space between items.
`spacing-s`	Small space between items.
`spacing`	Medium space between items.
`spacing-l`	Large space between items.
`spacing-xl`	Extra-large space between items.

spacing-xs

Extra-small space between items.

spacing-s

Small space between items.

spacing

Medium space between items.

spacing-l

Large space between items.

spacing-xl

Extra-large space between items.

<vaadin-horizontal-layout
  theme="spacing-xs padding">
</vaadin-horizontal-layout>

Padding

Padding is the space between the outer border and the content in a layout. Padding can help distinguish the content in a layout from its surrounding. Padding is applied using the padding theme variant.

Open in a
new tab
@state()
private theme = 'padding';

protected override render() {
  return html`
    <vaadin-horizontal-layout theme="${this.theme} spacing" style="align-items: stretch">
      <vaadin-button>Button 1</vaadin-button>
      <vaadin-button>Button 2</vaadin-button>
      <vaadin-button>Button 3</vaadin-button>
    </vaadin-horizontal-layout>
    <vaadin-radio-group
      label="Padding"
      .value="${this.theme}"
      @value-changed="${(event: RadioGroupValueChangedEvent) => {
        this.theme = event.detail.value;
      }}"
    >
      <vaadin-radio-button value="padding" label="Enabled"></vaadin-radio-button>
      <vaadin-radio-button value="" label="Disabled"></vaadin-radio-button>
    </vaadin-radio-group>
  `;
}

Margin

Use margin to create space around a layout.

Open in a
new tab
@state()
private theme = 'margin';

protected override render() {
  return html`
    <div class="container">
      <vaadin-horizontal-layout
        theme="${this.theme} spacing padding"
        style="align-items: stretch"
      >
        <vaadin-button>Button 1</vaadin-button>
        <vaadin-button>Button 2</vaadin-button>
        <vaadin-button>Button 3</vaadin-button>
      </vaadin-horizontal-layout>
    </div>
    <vaadin-radio-group
      label="Margin"
      .value="${this.theme}"
      @value-changed="${(event: RadioGroupValueChangedEvent) => {
        this.theme = event.detail.value;
      }}"
    >
      <vaadin-radio-button value="margin" label="Enabled"></vaadin-radio-button>
      <vaadin-radio-button value="" label="Disabled"></vaadin-radio-button>
    </vaadin-radio-group>
  `;
}

Expanding Items

Components can be made to expand and take up any excess space a layout may have.

Open in a
new tab
@state()
private size = '0';

protected override render() {
  return html`
    <vaadin-horizontal-layout theme="padding spacing">
      <vaadin-button style="flex-grow: ${this.size}">Button 1</vaadin-button>
      <vaadin-button>Button 2</vaadin-button>
      <vaadin-button>Button 3</vaadin-button>
    </vaadin-horizontal-layout>
    <vaadin-radio-group
      label="Item sizing"
      .value="${this.size}"
      @value-changed="${(event: RadioGroupValueChangedEvent) => {
        this.size = event.detail.value;
      }}"
    >
      <vaadin-radio-button value="0" label="Default size"></vaadin-radio-button>
      <vaadin-radio-button value="1" label="Expand"></vaadin-radio-button>
    </vaadin-radio-group>
  `;
}

When multiple components expand, they do so relative to each other. For example, having two items with expand ratios of 2 and 1 results in the first item taking up twice as much of the available space as the second item.

61c42eee-d39a-11ed-afa1-0242ac120002

Docs