> Markdown version of [Horizontal Layout](https://vaadin.com/docs/latest/components/horizontal-layout). Section index: [llms.txt](https://vaadin.com/docs/latest/components/llms.txt)

# Horizontal Layout

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](https://vaadin.com/docs/latest/components/vertical-layout.md) for placing components top-to-bottom.

**Lit** — `horizontal-layout-basic.ts`

```typescript
<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>
```

**Flow** — `HorizontalLayoutBasic.java`

```java
HorizontalLayout layout = new HorizontalLayout();
layout.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");

layout.add(item1, item2, item3);
```

**React** — `horizontal-layout-basic.tsx`

```tsx
<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>
```

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

## <a id="vertical-alignment"></a>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.

**Lit** — `horizontal-layout-vertical-alignment.ts`

```typescript
<vaadin-horizontal-layout
  theme="spacing padding"
  class="height-4xl"
  style="align-items: center"
>
  <div class="example-item">Item 1</div>
  <div class="example-item">Item 2</div>
  <div class="example-item">Item 3</div>
</vaadin-horizontal-layout>
```

**Flow** — `HorizontalLayoutVerticalAlignment.java`

```java
HorizontalLayout layout = new HorizontalLayout();
layout.setPadding(true);
layout.setAlignItems(FlexComponent.Alignment.CENTER);

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");

layout.add(item1, item2, item3);
```

**React** — `horizontal-layout-vertical-alignment.tsx`

```tsx
<HorizontalLayout
  theme="spacing padding"
  className="height-4xl"
  style={{ alignItems: 'center' }}
>
  <div className="example-item">Item 1</div>
  <div className="example-item">Item 2</div>
  <div className="example-item">Item 3</div>
</HorizontalLayout>
```

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

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

**Lit** — `horizontal-layout-individual-alignment.ts`

```typescript
<vaadin-horizontal-layout
  theme="spacing padding"
  class="height-4xl"
  style="align-items: stretch"
>
  <div class="example-item" style="align-self: start">Item 1</div>
  <div class="example-item">Item 2</div>
  <div class="example-item" style="align-self: end">Item 3</div>
</vaadin-horizontal-layout>
```

**Flow** — `HorizontalLayoutIndividualAlignment.java`

```java
HorizontalLayout layout = new HorizontalLayout();
layout.setPadding(true);
layout.setAlignItems(FlexComponent.Alignment.STRETCH);

Div item1 = new Div("Item 1");
item1.setClassName("example-item");
layout.add(item1);
layout.setAlignSelf(FlexComponent.Alignment.START, item1);

Div item2 = new Div("Item 2");
item2.setClassName("example-item");
layout.add(item2);

Div item3 = new Div("Item 3");
item3.setClassName("example-item");
layout.add(item3);
layout.setAlignSelf(FlexComponent.Alignment.END, item3);
```

**React** — `horizontal-layout-individual-alignment.tsx`

```tsx
<HorizontalLayout
  theme="spacing padding"
  className="height-4xl"
  style={{ alignItems: 'stretch' }}
>
  <div className="example-item" style={{ alignSelf: 'start' }}>
    Item 1
  </div>
  <div className="example-item">Item 2</div>
  <div className="example-item" style={{ alignSelf: 'end' }}>
    Item 3
  </div>
</HorizontalLayout>
```

## <a id="horizontal-alignment"></a>Horizontal Alignment

There are two ways to align items horizontally: *individual alignment* of items, and *justification*. These two methods cannot be used simultaneously.

### <a id="aligning-individual-items"></a>Aligning Individual Items

Each item in the layout can be grouped to the start, center and end of the layout.

**Lit** — `horizontal-layout-slots.ts`

```typescript
<vaadin-horizontal-layout theme="spacing padding">
  <div class="example-item">Start</div>
  <div class="example-item" slot="middle">Middle</div>
  <div class="example-item" slot="end">End</div>
</vaadin-horizontal-layout>
```

**Flow** — `HorizontalLayoutSlots.java`

```java
HorizontalLayout layout = new HorizontalLayout();
layout.setPadding(true);

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

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

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

layout.addToStart(start);
layout.addToMiddle(middle);
layout.addToEnd(end);
```

**React** — `horizontal-layout-slots.tsx`

```tsx
<HorizontalLayout theme="spacing padding">
  <div className="example-item">Start</div>
  <div className="example-item" slot="middle">
    Middle
  </div>
  <div className="example-item" slot="end">
    End
  </div>
</HorizontalLayout>
```

### <a id="justification"></a>Justification

Justification modes determine how items in the layout are distributed within the available space. Six justification modes are available:

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

**Lit** — `horizontal-layout-horizontal-alignment.ts`

```typescript
<vaadin-horizontal-layout theme="spacing padding" style="justify-content: center">
  <div class="example-item">Item 1</div>
  <div class="example-item">Item 2</div>
  <div class="example-item">Item 3</div>
</vaadin-horizontal-layout>
```

**Flow** — `HorizontalLayoutHorizontalAlignment.java`

```java
HorizontalLayout layout = new HorizontalLayout();
layout.setPadding(true);
layout.setJustifyContentMode(FlexComponent.JustifyContentMode.CENTER);

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");

layout.add(item1, item2, item3);
```

**React** — `horizontal-layout-horizontal-alignment.tsx`

```tsx
<HorizontalLayout theme="spacing padding" style={{ justifyContent: 'center' }}>
  <div className="example-item">Item 1</div>
  <div className="example-item">Item 2</div>
  <div className="example-item">Item 3</div>
</HorizontalLayout>
```

## <a id="spacing"></a>Spacing

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

**Lit** — `horizontal-layout-spacing.ts`

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

**Flow** — `HorizontalLayoutSpacing.java`

```java
// HorizontalLayout has spacing enabled by default, use setSpacing to
// disable it
HorizontalLayout layoutWithoutSpacing = new HorizontalLayout();
layoutWithoutSpacing.setSpacing(false);
```

**React** — `horizontal-layout-spacing.tsx`

```tsx
<HorizontalLayout theme="spacing padding">
</HorizontalLayout>
```

Spacing can be customized with a specific value or a CSS custom property:

**Lit**

```html
<vaadin-horizontal-layout style="gap: 12px"></vaadin-horizontal-layout>

<vaadin-horizontal-layout style="gap: var(--vaadin-gap-l)"></vaadin-horizontal-layout>
```

**Flow**

```java
HorizontalLayout layout = new HorizontalLayout();

layout.setSpacing(12, Unit.PIXELS);

layout.setSpacing("var(--vaadin-gap-l)");
```

**React**

```tsx
<HorizontalLayout style={{ gap: '12px' }}></HorizontalLayout>

<HorizontalLayout style={{ gap: 'var(--vaadin-gap-l)' }}></HorizontalLayout>
```

For available CSS custom properties that can be used as spacing values, see [gap properties](https://vaadin.com/docs/latest/styling/themes/base.md#gap) from the base styles and [space properties](https://vaadin.com/docs/latest/styling/themes/lumo/lumo-style-properties/size-space.md#space) from the Lumo theme.

## <a id="padding"></a>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.

**Lit** — `horizontal-layout-padding.ts`

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

**Flow** — `HorizontalLayoutPadding.java`

```java
HorizontalLayout layoutWithPadding = new HorizontalLayout();
layoutWithPadding.setPadding(true);
```

**React** — `horizontal-layout-padding.tsx`

```tsx
<HorizontalLayout theme="padding spacing">
</HorizontalLayout>
```

## <a id="margin"></a>Margin

Use margin to create space around a layout.

**Lit** — `horizontal-layout-margin.ts`

```html
<vaadin-horizontal-layout theme="margin spacing padding">
</vaadin-horizontal-layout>
```

**Flow** — `HorizontalLayoutMargin.java`

```java
HorizontalLayout layoutWithMargin = new HorizontalLayout();
layoutWithMargin.setMargin(true);
```

**React** — `horizontal-layout-margin.tsx`

```tsx
<HorizontalLayout theme="margin spacing padding">
</HorizontalLayout>
```

## <a id="wrapping"></a>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.

**Lit** — `horizontal-layout-wrapping.ts`

```html
<vaadin-horizontal-layout theme="wrap spacing margin padding" style="width: 350px;">
</vaadin-horizontal-layout>
```

**Flow** — `HorizontalLayoutWrapping.java`

```java
HorizontalLayout layoutWithWrap = new HorizontalLayout();
layoutWithWrap.setWrap(true);
```

**React** — `horizontal-layout-wrapping.tsx`

```tsx
<HorizontalLayout
  theme="wrap spacing margin padding"
  style={{ alignItems: 'stretch', width: '350px' }}
>
</HorizontalLayout>
```

### <a id="wrapping-horizontally-aligned-items"></a>Wrapping Horizontally Aligned Items

Wrapping may not behave as desired when combined with either of the two [horizontal alignment](https://vaadin.com/docs/latest/components.md#horizontal-alignment) methods. One common solution is group items that should wrap together into sub-layouts:

**Lit** — `horizontal-layout-slots-wrapping.ts`

```typescript
<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>
```

**Flow** — `HorizontalLayoutSlotsWrapping.java`

```java
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);
```

**React** — `horizontal-layout-slots-wrapping.tsx`

```tsx
<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>
```

## <a id="expanding-items"></a>Expanding Items

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

**Lit** — `horizontal-layout-expanding-items.ts`

```html
<vaadin-horizontal-layout theme="padding spacing">
  <div class="example-item" style="flex-grow: 1">Item 1</div>
  <div class="example-item">Item 2</div>
  <div class="example-item">Item 3</div>
</vaadin-horizontal-layout>
```

**Flow** — `HorizontalLayoutExpandingItems.java`

```java
Div item1 = new Div("Item 1");
item1.setClassName("example-item");
HorizontalLayout layout = new HorizontalLayout();
layout.setFlexGrow(1, item1);
```

**React** — `horizontal-layout-expanding-items.tsx`

```tsx
<HorizontalLayout theme="padding spacing">
  <div className="example-item" style={{ flexGrow: 1 }}>
    Item 1
  </div>
  <div className="example-item">Item 2</div>
  <div className="example-item">Item 3</div>
</HorizontalLayout>
```

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.

## <a id="troubleshooting"></a>Troubleshooting

### <a id="component-is-smaller-than-its-specified-size"></a>Component is Smaller than its Specified Size

In some situations, a component with a specific, fixed size is rendered smaller than that size (and its size may vary depending on the size of the UI).

This is usually caused by the component being placed in the same Horizontal or Vertical Layout as another component with 100% (or “full”) size along the same axis.

The reason for this behavior is a combination of two aspects of Horizontal Layout and Vertical Layout:

- 100% width or height actually means the full width or height of the layout, rather than whatever space is available after any fixed-size items.

- By default, children of these layouts are allowed to shrink below their specified size. While this allows full-size items to shrink below 100% to make room for other items, it also makes fixed-size items shrink a bit.

There are three main ways to solve this issue:

#### <a id="prevent-the-fixed-size-element-from-shrinking"></a>Prevent the fixed-size element from shrinking

By setting the flex-shrink value of the fixed size component to 0, it is prevented from shrinking below that size.

**Lit**

```html
<vaadin-horizontal-layout>
  <div style="width: 200px; flex-shrink: 0;"></div>
  <div style="width: 100%;"></div>
</vaadin-horizontal-layout>
```

**Flow**

```java
HorizontalLayout layout = new HorizontalLayout(fixedSizeComponent, fullSizeComponent);
fixedSizeComponent.setWidth("200px");
fullSizeComponent.setWidthFull();

layout.setFlexShrink(fixedSizeComponent, 0);
// or
fixedSizeComponent.getStyle().setFlexShrink("0");
```

**React**

```tsx
<HorizontalLayout>
  <div style={{ width: '200px', flexShrink: 0 }}></div>
  <div style={{ width: '100%' }}></div>
</HorizontalLayout>
```

#### <a id="use-flex-grow-instead-of-100-size"></a>Use Flex-Grow Instead of 100% Size

Instead of setting a 100% (or “full”) size, you can make a component take all available space by setting its flex-grow value to 1.

**Lit**

```html
<vaadin-horizontal-layout>
  <div style="width: 200px;"></div>
  <div style="flex-grow: 1;"></div>
</vaadin-horizontal-layout>
```

**Flow**

```java
HorizontalLayout layout = new HorizontalLayout(fixedSizeComponent, fullSizeComponent);
fixedSizeComponent.setWidth("200px");

layout.setFlexGrow(fullSizeComponent, 1);
// or
fullSizeComponent.getStyle().setFlexGrow("1");
```

**React**

```tsx
<HorizontalLayout>
  <div style={{ width: '200px' }}></div>
  <div style={{ flexGrow: 1 }}></div>
</HorizontalLayout>
```

#### <a id="enable-layout-improvements-to-prevent-shrinking-flow-only-experimental"></a>Enable Layout Improvements to Prevent Shrinking (Flow only, experimental)

Instead of adjusting individual components, you can enable the `layoutComponentImprovements` [feature flag](https://vaadin.com/docs/latest/flow/configuration/feature-flags.md). With this flag, the Flow APIs `setWidthFull`, `setHeightFull`, and `setSizeFull` are rewired to automatically apply `flex: 1` to the component. This prevents fixed-size components from shrinking and makes the full-size component take up the remaining space in the layout.

### <a id="component-overflows-its-specified-size"></a>Component Overflows its Specified Size

This is most commonly noticed on scroll containers like [Scroller](https://vaadin.com/docs/latest/components/scroller.md) and [TabSheet](https://vaadin.com/docs/latest/components/tabs.md), or elements that have been scroll-enabled through CSS, but it can occur in other situations as well. The problem often causes extra undesired scrollbars to appear.

This is caused by the default minimum size of a layout item to be equal to the size of its contents.

There are three main ways to solve this issue:

#### <a id="set-an-appropriate-minimum-size"></a>Set an Appropriate Minimum Size

Set the minimum size to 0 or any other specific size.

**Lit**

```html
<div style="min-width: 0"></div>
```

**Flow**

```java
overFlowingComponent.setMinWidth("0");
```

**React**

```tsx
<div style={{ minWidth: '0' }}></div>
```

#### <a id="prevent-overflow"></a>Prevent Overflow

You can prevent the component from overflowing by setting the CSS overflow property to hidden. Be aware that this will also clip outlines and box-shadows, such as those used for focus rings.

**Lit**

```html
<div style="overflow: hidden"></div>
```

**Flow**

```java
overFlowingComponent.getStyle().setOverflow(Overflow.HIDDEN);
```

**React**

```tsx
<div style={{ overflow: 'hidden' }}></div>
```

#### <a id="enable-layout-improvements-to-allow-shrinking-flow-only-experimental"></a>Enable Layout Improvements to Allow Shrinking (Flow only, experimental)

The same `layoutComponentImprovements` [feature flag](https://vaadin.com/docs/latest/flow/configuration/feature-flags.md) described above also addresses overflow. When enabled, the Flow APIs `setWidthFull`, `setHeightFull`, and `setSizeFull` are rewired to set the minimum size of nested Horizontal and Vertical Layouts to 0, allowing them to shrink below the size of their contents.

### <a id="a-nested-layout-takes-all-the-space"></a>A Nested Layout Takes All the Space

When you nest a Vertical Layout or Horizontal Layout inside another layout, its **default size** — not only the sizes you set explicitly — affects how space is shared. A Vertical Layout defaults to `width: 100%`, so when nested as a child of a Horizontal Layout it claims the full width of the row and starves its siblings. (A nested Horizontal Layout defaults to hugging its content instead.)

A typical symptom is a text column that should grow and truncate with an ellipsis, but instead collapses to zero width: a sibling layout’s implicit 100% width has consumed the row. Adding the usual `min-width: 0` ellipsis recipe to the text column isn’t enough on its own, because the sibling’s default width is the real cause.

To fix this, size both children explicitly: let the column that should only take the space it needs hug its content, and give the growing column `flex: 1 1 0` together with `width: 0`, `min-width: 0`, and `overflow: hidden` so it can shrink below its content size and truncate.

**Lit**

```html
<vaadin-horizontal-layout>
  <!-- Grows and truncates -->
  <vaadin-vertical-layout
      style="flex: 1 1 0; width: 0; min-width: 0; overflow: hidden;">
    ...
  </vaadin-vertical-layout>
  <!-- Hugs its content (time + badge) -->
  <vaadin-vertical-layout style="width: auto;">
    ...
  </vaadin-vertical-layout>
</vaadin-horizontal-layout>
```

**Flow**

```java
HorizontalLayout row = new HorizontalLayout(textColumn, metaColumn);

// The growing column truncates with an ellipsis
textColumn.getStyle().setFlexGrow("1");   // grow to fill free space
textColumn.getStyle().setFlexShrink("1"); // allow shrinking
textColumn.getStyle().setFlexBasis("0");  // start from zero width
textColumn.setWidth("0");
textColumn.setMinWidth("0");
textColumn.getStyle().setOverflow(Overflow.HIDDEN);

// The meta column hugs its content instead of filling the row
metaColumn.setWidth(null);
```

**React**

```tsx
<HorizontalLayout>
  {/* Grows and truncates */}
  <VerticalLayout style={{ flex: '1 1 0', width: 0, minWidth: 0, overflow: 'hidden' }}>
    ...
  </VerticalLayout>
  {/* Hugs its content (time + badge) */}
  <VerticalLayout style={{ width: 'auto' }}>
    ...
  </VerticalLayout>
</HorizontalLayout>
```

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