Horizontal Layout Styling

Styling API reference for the Horizontal Layout component.

Style Variants
Style Properties
CSS Selectors

Style Variants

Horizontal Layout supports the following style variants:

Variant Supported by

Variant	Supported by
`margin`	Aura, Lumo
`padding`	Aura, Lumo
`spacing`	Aura, Lumo
`wrap`	Aura, Lumo

margin

Aura, Lumo

padding

Aura, Lumo

spacing

Aura, Lumo

wrap

Aura, Lumo

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

Source code

HorizontalLayoutSpacing.javapackage com.vaadin.demo.component.horizontallayout;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Paragraph;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.router.Route;

@Route("horizontal-layout-spacing")
public class HorizontalLayoutSpacing extends Div {

    public HorizontalLayoutSpacing() {
        add(new Paragraph("Horizontal layout without spacing:"));
        // tag::snippet[]
        // HorizontalLayout has spacing enabled by default, use setSpacing to
        // disable it
        HorizontalLayout layoutWithoutSpacing = new HorizontalLayout();
        layoutWithoutSpacing.setSpacing(false);
        // end::snippet[]
        layoutWithoutSpacing.setPadding(true);

        Div item1 = new Div("Item 1");
        item1.setClassName("example-item");
        Div item2 = new Div("Item 2");
        item2.setClassName("example-item");
        Div item3 = new Div("Item 3");
        item3.setClassName("example-item");

        layoutWithoutSpacing.add(item1, item2, item3);
        add(layoutWithoutSpacing);

        add(new Paragraph("Horizontal layout with spacing:"));
        HorizontalLayout layoutWithSpacing = new HorizontalLayout();
        layoutWithSpacing.setPadding(true);

        Div spacingItem1 = new Div("Item 1");
        spacingItem1.setClassName("example-item");
        Div spacingItem2 = new Div("Item 2");
        spacingItem2.setClassName("example-item");
        Div spacingItem3 = new Div("Item 3");
        spacingItem3.setClassName("example-item");

        layoutWithSpacing.add(spacingItem1, spacingItem2, spacingItem3);
        add(layoutWithSpacing);

        this.setClassName("basic-layouts-example");
    }

}
horizontal-layout-spacing.tsximport { HorizontalLayout } from '@vaadin/react-components';

function Example() {
  return (
    <div>
      <p>Horizontal layout without spacing:</p>
      <HorizontalLayout theme="padding">
        <div className="example-item">Item 1</div>
        <div className="example-item">Item 2</div>
        <div className="example-item">Item 3</div>
      </HorizontalLayout>

      <p>Horizontal layout with spacing:</p>
      {/* tag::snippet[] */}
      <HorizontalLayout theme="spacing padding">
        {/* end::snippet[] */}
        <div className="example-item">Item 1</div>
        <div className="example-item">Item 2</div>
        <div className="example-item">Item 3</div>
        {/* tag::snippet[] */}
      </HorizontalLayout>
      {/* end::snippet[] */}
    </div>
  );
}

horizontal-layout-spacing.tsimport '@vaadin/horizontal-layout';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('horizontal-layout-spacing')
export class Example extends LitElement {
  connectedCallback() {
    super.connectedCallback();
    this.classList.add('basic-layouts-example');
  }

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <p>Horizontal layout without spacing:</p>
      <vaadin-horizontal-layout theme="padding">
        <div class="example-item">Item 1</div>
        <div class="example-item">Item 2</div>
        <div class="example-item">Item 3</div>
      </vaadin-horizontal-layout>

      <p>Horizontal layout with spacing:</p>
      <!-- tag::snippet[] -->
      <vaadin-horizontal-layout theme="spacing padding">
        <!-- end::snippet[] -->
        <div class="example-item">Item 1</div>
        <div class="example-item">Item 2</div>
        <div class="example-item">Item 3</div>
        <!-- tag::snippet[] -->
      </vaadin-horizontal-layout>
      <!-- end::snippet[] -->
    `;
  }
}

Five different spacing style variants are available:

Open in a
new tab

Source code

horizontal-layout-spacing-variants.tsimport '@vaadin/horizontal-layout';
import '@vaadin/radio-group';
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import type { RadioGroupValueChangedEvent } from '@vaadin/radio-group';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('horizontal-layout-spacing-variants')
export class Example extends LitElement {
  connectedCallback() {
    super.connectedCallback();
    this.classList.add('basic-layouts-example');
  }

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  // tag::snippet[]
  @state()
  private themeVariant = 'spacing-xl';

  protected override render() {
    return html`
      <vaadin-horizontal-layout theme="${this.themeVariant} padding" style="align-items: stretch">
        <div class="example-item">Item 1</div>
        <div class="example-item">Item 2</div>
        <div class="example-item">Item 3</div>
      </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>
    `;
  }
  // end::snippet[]
}

Style Variant Usage Recommendation

Style 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.

Source code

JavaHorizontalLayout layout = new HorizontalLayout();
layout.setSpacing(false);
layout.getThemeList().add("spacing-xs");
Java
tsx<HorizontalLayout
  theme="spacing-xs padding">
</HorizontalLayout>
tsx
HTML<vaadin-horizontal-layout
  theme="spacing-xs padding">
</vaadin-horizontal-layout>
HTML

Alternatively, the spacing can be set to a custom value:

Source code

JavaHorizontalLayout layout = new HorizontalLayout();
layout.setSpacing(12, Unit.PIXELS);
Java
tsx<HorizontalLayout style={{ gap: '12px' }}>
</HorizontalLayout>
tsx
HTML<vaadin-horizontal-layout style="gap: 12px">
</vaadin-horizontal-layout>
HTML

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 style variant.

Open in a
new tab

Source code

HorizontalLayoutPadding.javapackage com.vaadin.demo.component.horizontallayout;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Paragraph;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.router.Route;

@Route("horizontal-layout-padding")
public class HorizontalLayoutPadding extends Div {

    public HorizontalLayoutPadding() {
        add(new Paragraph("Horizontal layout without padding:"));
        HorizontalLayout layoutWithoutPadding = new HorizontalLayout();

        Div item1 = new Div("Item 1");
        item1.setClassName("example-item");
        Div item2 = new Div("Item 2");
        item2.setClassName("example-item");
        Div item3 = new Div("Item 3");
        item3.setClassName("example-item");

        layoutWithoutPadding.add(item1, item2, item3);
        this.add(layoutWithoutPadding);

        add(new Paragraph("Horizontal layout with padding:"));
        // tag::snippet[]
        HorizontalLayout layoutWithPadding = new HorizontalLayout();
        layoutWithPadding.setPadding(true);
        // end::snippet[]

        Div paddingItem1 = new Div("Item 1");
        paddingItem1.setClassName("example-item");
        Div paddingItem2 = new Div("Item 2");
        paddingItem2.setClassName("example-item");
        Div paddingItem3 = new Div("Item 3");
        paddingItem3.setClassName("example-item");

        layoutWithPadding.add(paddingItem1, paddingItem2, paddingItem3);
        this.add(layoutWithPadding);

        this.setClassName("basic-layouts-example");
    }

}
horizontal-layout-padding.tsximport { HorizontalLayout } from '@vaadin/react-components';

function Example() {
  return (
    <>
      <p>Horizontal layout without padding:</p>
      <HorizontalLayout theme="spacing">
        <div className="example-item">Item 1</div>
        <div className="example-item">Item 2</div>
        <div className="example-item">Item 3</div>
      </HorizontalLayout>

      <p>Horizontal layout with padding:</p>
      {/* tag::snippet[] */}
      <HorizontalLayout theme="padding spacing">
        {/* end::snippet[] */}
        <div className="example-item">Item 1</div>
        <div className="example-item">Item 2</div>
        <div className="example-item">Item 3</div>
        {/* tag::snippet[] */}
      </HorizontalLayout>
      {/* end::snippet[] */}
    </>
  );
}

horizontal-layout-padding.tsimport '@vaadin/horizontal-layout';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('horizontal-layout-padding')
export class Example extends LitElement {
  connectedCallback() {
    super.connectedCallback();
    this.classList.add('basic-layouts-example');
  }

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <p>Horizontal layout without padding:</p>
      <vaadin-horizontal-layout theme="spacing">
        <div class="example-item">Item 1</div>
        <div class="example-item">Item 2</div>
        <div class="example-item">Item 3</div>
      </vaadin-horizontal-layout>

      <p>Horizontal layout with padding:</p>
      <!-- tag::snippet[] -->
      <vaadin-horizontal-layout theme="padding spacing">
        <!-- end::snippet[] -->
        <div class="example-item">Item 1</div>
        <div class="example-item">Item 2</div>
        <div class="example-item">Item 3</div>
        <!-- tag::snippet[] -->
      </vaadin-horizontal-layout>
      <!-- end::snippet[] -->
    `;
  }
}

Margin

Use margin to create space around a layout.

Open in a
new tab

Source code

HorizontalLayoutMargin.javapackage com.vaadin.demo.component.horizontallayout;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Paragraph;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.router.Route;

@Route("horizontal-layout-margin")
public class HorizontalLayoutMargin extends Div {

    public HorizontalLayoutMargin() {
        add(new Paragraph("Horizontal layout without margin:"));
        HorizontalLayout layoutWithoutMargin = new HorizontalLayout();
        layoutWithoutMargin.setPadding(true);
        layoutWithoutMargin.setWidth("auto");

        Div item1 = new Div("Item 1");
        item1.setClassName("example-item");
        Div item2 = new Div("Item 2");
        item2.setClassName("example-item");
        Div item3 = new Div("Item 3");
        item3.setClassName("example-item");

        layoutWithoutMargin.add(item1, item2, item3);

        Div container2 = new Div();
        container2.setClassName("container");
        container2.add(layoutWithoutMargin);
        this.add(container2);

        add(new Paragraph("Horizontal layout with margin:"));
        // tag::snippet[]
        HorizontalLayout layoutWithMargin = new HorizontalLayout();
        layoutWithMargin.setMargin(true);
        // end::snippet[]
        layoutWithMargin.setPadding(true);
        layoutWithMargin.setWidth("auto");

        Div marginItem1 = new Div("Item 1");
        marginItem1.setClassName("example-item");
        Div marginItem2 = new Div("Item 2");
        marginItem2.setClassName("example-item");
        Div marginItem3 = new Div("Item 3");
        marginItem3.setClassName("example-item");

        layoutWithMargin.add(marginItem1, marginItem2, marginItem3);

        Div container1 = new Div();
        container1.setClassName("container");
        container1.add(layoutWithMargin);
        this.add(container1);

        this.setClassName("basic-layouts-example");
    }

}
horizontal-layout-margin.tsximport { HorizontalLayout } from '@vaadin/react-components';

function Example() {
  return (
    <>
      <p>Horizontal layout without margin:</p>
      <div className="container">
        <HorizontalLayout theme="spacing padding">
          <div className="example-item">Item 1</div>
          <div className="example-item">Item 2</div>
          <div className="example-item">Item 3</div>
        </HorizontalLayout>
      </div>

      <p>Horizontal layout with margin:</p>
      <div className="container">
        {/* tag::snippet[] */}
        <HorizontalLayout theme="margin spacing padding">
          {/* end::snippet[] */}
          <div className="example-item">Item 1</div>
          <div className="example-item">Item 2</div>
          <div className="example-item">Item 3</div>
          {/* tag::snippet[] */}
        </HorizontalLayout>
        {/* end::snippet[] */}
      </div>
    </>
  );
}

horizontal-layout-margin.tsimport '@vaadin/horizontal-layout';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('horizontal-layout-margin')
export class Example extends LitElement {
  connectedCallback() {
    super.connectedCallback();
    this.classList.add('basic-layouts-example');
  }

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <p>Horizontal layout without margin:</p>
      <div class="container">
        <vaadin-horizontal-layout theme="spacing padding">
          <div class="example-item">Item 1</div>
          <div class="example-item">Item 2</div>
          <div class="example-item">Item 3</div>
        </vaadin-horizontal-layout>
      </div>

      <p>Horizontal layout with margin:</p>
      <div class="container">
        <!-- tag::snippet[] -->
        <vaadin-horizontal-layout theme="margin spacing padding">
          <!-- end::snippet[] -->
          <div class="example-item">Item 1</div>
          <div class="example-item">Item 2</div>
          <div class="example-item">Item 3</div>
          <!-- tag::snippet[] -->
        </vaadin-horizontal-layout>
        <!-- end::snippet[] -->
      </div>
    `;
  }
}

Wrapping

By default, components in a layout either shrink or overflow when there isn’t enough horizontal space. Enable wrapping to allow components to flow onto a new line when space runs out, preventing overflow.

Open in a
new tab

Source code

HorizontalLayoutWrapping.javapackage com.vaadin.demo.component.horizontallayout;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Paragraph;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.router.Route;

@Route("horizontal-layout-wrapping")
public class HorizontalLayoutWrapping extends Div {

    public HorizontalLayoutWrapping() {
        add(new Paragraph("Horizontal layout without wrapping:"));
        HorizontalLayout layoutWithoutWrap = new HorizontalLayout();
        layoutWithoutWrap.setPadding(true);
        layoutWithoutWrap.setSpacing(true);
        layoutWithoutWrap.setMargin(true);
        layoutWithoutWrap.setWidth("350px");

        Div item1 = new Div("Item 1");
        item1.setClassName("example-item");
        Div item2 = new Div("Item 2");
        item2.setClassName("example-item");
        Div item3 = new Div("Item 3");
        item3.setClassName("example-item");
        Div item4 = new Div("Item 4");
        item4.setClassName("example-item");
        Div item5 = new Div("Item 5");
        item5.setClassName("example-item");

        layoutWithoutWrap.add(item1, item2, item3, item4, item5);
        this.add(layoutWithoutWrap);

        add(new Paragraph("Horizontal layout with wrapping:"));
        // tag::snippet[]
        HorizontalLayout layoutWithWrap = new HorizontalLayout();
        layoutWithWrap.setWrap(true);
        // end::snippet[]
        layoutWithWrap.setMargin(true);
        layoutWithWrap.setPadding(true);
        layoutWithWrap.setSpacing(true);
        layoutWithWrap.setWidth("350px");

        Div wrapItem1 = new Div("Item 1");
        wrapItem1.setClassName("example-item");
        Div wrapItem2 = new Div("Item 2");
        wrapItem2.setClassName("example-item");
        Div wrapItem3 = new Div("Item 3");
        wrapItem3.setClassName("example-item");
        Div wrapItem4 = new Div("Item 4");
        wrapItem4.setClassName("example-item");
        Div wrapItem5 = new Div("Item 5");
        wrapItem5.setClassName("example-item");

        layoutWithWrap.add(wrapItem1, wrapItem2, wrapItem3, wrapItem4,
                wrapItem5);

        this.setClassName("basic-layouts-example");
        this.add(layoutWithWrap);
    }

}
horizontal-layout-wrapping.tsximport { HorizontalLayout } from '@vaadin/react-components';

function Example() {
  return (
    <>
      <p>Horizontal layout without wrapping:</p>
      <HorizontalLayout
        theme="spacing margin padding"
        style={{ alignItems: 'stretch', width: '350px' }}
      >
        <div className="example-item">Item 1</div>
        <div className="example-item">Item 2</div>
        <div className="example-item">Item 3</div>
        <div className="example-item">Item 4</div>
        <div className="example-item">Item 5</div>
      </HorizontalLayout>
      <p>Horizontal layout with wrapping:</p>
      {/* tag::snippet[] */}
      <HorizontalLayout
        theme="wrap spacing margin padding"
        style={{ alignItems: 'stretch', width: '350px' }}
      >
        {/* end::snippet[] */}
        <div className="example-item">Item 1</div>
        <div className="example-item">Item 2</div>
        <div className="example-item">Item 3</div>
        <div className="example-item">Item 4</div>
        <div className="example-item">Item 5</div>
        {/* tag::snippet[] */}
      </HorizontalLayout>
      {/* end::snippet[] */}
    </>
  );
}

horizontal-layout-wrapping.tsimport '@vaadin/horizontal-layout';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('horizontal-layout-wrapping')
export class Example extends LitElement {
  connectedCallback() {
    super.connectedCallback();
    this.classList.add('basic-layouts-example');
  }

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <p>Horizontal layout without wrapping:</p>
      <vaadin-horizontal-layout theme="spacing margin padding" style="width: 350px;">
        <div class="example-item">Item 1</div>
        <div class="example-item">Item 2</div>
        <div class="example-item">Item 3</div>
        <div class="example-item">Item 4</div>
        <div class="example-item">Item 5</div>
      </vaadin-horizontal-layout>

      <p>Horizontal layout with wrapping:</p>
      <!-- tag::snippet[] -->
      <vaadin-horizontal-layout theme="wrap spacing margin padding" style="width: 350px;">
        <!-- end::snippet[] -->
        <div class="example-item">Item 1</div>
        <div class="example-item">Item 2</div>
        <div class="example-item">Item 3</div>
        <div class="example-item">Item 4</div>
        <div class="example-item">Item 5</div>
        <!-- tag::snippet[] -->
      </vaadin-horizontal-layout>
      <!-- end::snippet[] -->
    `;
  }
}

Wrapping Horizontally Aligned Items

Wrapping may not behave as desired when combined with either of the two horizontal alignment methods. One common solution is group items that should wrap together into sub-layouts:

Open in a
new tab

Source code

HorizontalLayoutSlotsWrapping.javapackage com.vaadin.demo.component.horizontallayout;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.router.Route;

@Route("horizontal-layout-slots-wrapping")
public class HorizontalLayoutSlotsWrapping extends Div {
    public HorizontalLayoutSlotsWrapping() {
        // tag::snippet[]
        HorizontalLayout layout = new HorizontalLayout();
        layout.setWrap(true);
        layout.setPadding(true);

        HorizontalLayout start = new HorizontalLayout();
        start.setPadding(true);

        Div item1 = new Div("Start");
        item1.setClassName("example-item");

        Div item2 = new Div("Start");
        item2.setClassName("example-item");

        start.add(item1, item2);

        HorizontalLayout middle = new HorizontalLayout();
        middle.setPadding(true);

        Div item3 = new Div("Middle");
        item3.setClassName("example-item");

        Div item4 = new Div("Middle");
        item4.setClassName("example-item");

        Div item5 = new Div("Middle");
        item5.setClassName("example-item");

        middle.add(item3, item4, item5);

        HorizontalLayout end = new HorizontalLayout();
        end.setPadding(true);

        Div item6 = new Div("End");
        item6.setClassName("example-item");

        Div item7 = new Div("End");
        item7.setClassName("example-item");

        end.add(item6, item7);

        layout.addToStart(start);
        layout.addToMiddle(middle);
        layout.addToEnd(end);
        // end::snippet[]

        this.setClassName("basic-layouts-example");
        this.add(layout);
    }

}
horizontal-layout-slots-wrapping.tsximport React from 'react';
import { HorizontalLayout } from '@vaadin/react-components';

function Example() {
  return (
    // tag::snippet[]
    <HorizontalLayout theme="spacing padding wrap">
      <HorizontalLayout theme="spacing padding">
        <div className="example-item">Start</div>
        <div className="example-item">Start</div>
      </HorizontalLayout>
      <HorizontalLayout theme="spacing padding" slot="middle">
        <div className="example-item">Middle</div>
        <div className="example-item">Middle</div>
        <div className="example-item">Middle</div>
      </HorizontalLayout>
      <HorizontalLayout theme="spacing padding" slot="end">
        <div className="example-item">End</div>
        <div className="example-item">End</div>
      </HorizontalLayout>
    </HorizontalLayout>
    // end::snippet[]
  );
}

horizontal-layout-slots-wrapping.tsimport '@vaadin/horizontal-layout';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('horizontal-layout-slots-wrapping')
export class Example extends LitElement {
  connectedCallback() {
    super.connectedCallback();
    this.classList.add('basic-layouts-example');
  }

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-horizontal-layout theme="spacing padding wrap">
        <vaadin-horizontal-layout theme="spacing padding">
          <div class="example-item">Start</div>
          <div class="example-item">Start</div>
        </vaadin-horizontal-layout>
        <vaadin-horizontal-layout theme="spacing padding" slot="middle">
          <div class="example-item">Middle</div>
          <div class="example-item">Middle</div>
          <div class="example-item">Middle</div>
        </vaadin-horizontal-layout>
        <vaadin-horizontal-layout theme="spacing padding" slot="end">
          <div class="example-item">End</div>
          <div class="example-item">End</div>
        </vaadin-horizontal-layout>
      </vaadin-horizontal-layout>
      <!-- end::snippet[] -->
    `;
  }
}

Style Properties

The following style properties can be used in CSS stylesheets to customize the appearance of this component.

To apply values to these properties globally in your application UI, place them in a CSS block using the html {…} selector. See Component Style Properties for more information on style properties.

Property Supported by

Property	Supported by
`--vaadin-horizontal-layout-gap`	Aura, Lumo
`--vaadin-horizontal-layout-padding`	Aura, Lumo
`--vaadin-horizontal-layout-margin`	Aura, Lumo

--vaadin-horizontal-layout-gap

Aura, Lumo

--vaadin-horizontal-layout-padding

Aura, Lumo

--vaadin-horizontal-layout-margin

Aura, Lumo

CSS Selectors

The following CSS selectors can be used in stylesheets to target the various parts and states of the component. See the Styling documentation for more details on how to style components.

Root element: vaadin-horizontal-layout

Docs

Docs

Horizontal Layout Styling

Style Variants

Spacing

Padding

Margin

Wrapping

Wrapping Horizontally Aligned Items

Style Properties

CSS Selectors