> Markdown version of [Basic Layouts](https://vaadin.com/docs/v23/components/basic-layouts). Section index: [llms.txt](https://vaadin.com/docs/v23/components/llms.txt)

# Basic Layouts

Vaadin features two basic layout components: Vertical Layout and Horizontal Layout. As their names suggest, they render their contents vertically and horizontally, respectively. Components are shown in the order they are added to either layout.

## <a id="vertical-layout"></a>Vertical Layout

Vertical Layout places components top-to-bottom in a column. By default, it has 100% width and undefined height, meaning its width is constrained by its parent component and its height is determined by the components it contains.

**TypeScript** — `basic-layouts-vertical-layout.ts`

```html
<vaadin-vertical-layout theme="spacing padding">
  <vaadin-button>Button 1</vaadin-button>
  <vaadin-button>Button 2</vaadin-button>
  <vaadin-button>Button 3</vaadin-button>
  <vaadin-button>Button 4</vaadin-button>
</vaadin-vertical-layout>
```

**Java** — `BasicLayoutsVerticalLayout.java`

```java
VerticalLayout layout = new VerticalLayout();
layout.add(new Button("Button 1"));
layout.add(new Button("Button 2"));
layout.add(new Button("Button 3"));
layout.add(new Button("Button 4"));
```

Components in a Vertical Layout can be aligned both vertically and horizontally.

### <a id="vertical-alignment"></a>Vertical Alignment

You can position components at the top, middle, or bottom. Alternatively, you can position components by specifying how a layout’s excess space (if any) is distributed between them.

**TypeScript** — `basic-layouts-vertical-layout-vertical-alignment.ts`

```typescript
@state()
justifyContent = 'flex-start';

protected override render() {
  return html`
    <vaadin-vertical-layout
      theme="spacing padding"
      class="height-5xl"
      style="justify-content: ${this.justifyContent}"
    >
      <vaadin-button>Button 1</vaadin-button>
      <vaadin-button>Button 2</vaadin-button>
      <vaadin-button>Button 3</vaadin-button>
    </vaadin-vertical-layout>
    <vaadin-radio-group
      label="Vertical alignment"
      .value="${this.justifyContent}"
      @value-changed="${(event: RadioGroupValueChangedEvent) => {
        this.justifyContent = event.detail.value;
      }}"
    >
      <vaadin-radio-button value="flex-start" label="Start (default)"></vaadin-radio-button>
      <vaadin-radio-button value="center" label="Center"></vaadin-radio-button>
      <vaadin-radio-button value="flex-end" label="End"></vaadin-radio-button>
      <vaadin-radio-button value="space-between" label="Between"></vaadin-radio-button>
      <vaadin-radio-button value="space-around" label="Around"></vaadin-radio-button>
      <vaadin-radio-button value="space-evenly" label="Evenly"></vaadin-radio-button>
    </vaadin-radio-group>
  `;
}
```

**Java** — `BasicLayoutsVerticalLayoutVerticalAlignment.java`

```java
VerticalLayout layout = new VerticalLayout();
layout.add(new Button("Button 1"));
layout.add(new Button("Button 2"));
layout.add(new Button("Button 3"));

...

radioGroup.addValueChangeListener(e -> {
    FlexComponent.JustifyContentMode mode = e.getValue().getMode();
    layout.setJustifyContentMode(mode);
});
```

| Value             | Description                                                                                                                              |
| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| `START` (default) | Positions items at the top.                                                                                                              |
| `CENTER`          | Vertically centers items.                                                                                                                |
| `END`             | Positions items at the bottom.                                                                                                           |
| `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 between 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. |

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

Components in a Vertical Layout can be left-aligned (default), centered, right-aligned or stretched horizontally.

**TypeScript** — `basic-layouts-vertical-layout-horizontal-alignment.ts`

```typescript
@state()
private alignItems = 'flex-start';

protected override render() {
  return html`
    <vaadin-vertical-layout theme="spacing padding" style="align-items: ${this.alignItems}">
      <vaadin-button>Button 1</vaadin-button>
      <vaadin-button>Button 2</vaadin-button>
      <vaadin-button>Button 3</vaadin-button>
    </vaadin-vertical-layout>
    <vaadin-radio-group
      label="Horizontal alignment"
      .value="${this.alignItems}"
      @value-changed="${(event: RadioGroupValueChangedEvent) => {
        this.alignItems = event.detail.value;
      }}"
    >
      <vaadin-radio-button value="flex-start" label="Start (default)"></vaadin-radio-button>
      <vaadin-radio-button value="center" label="Center"></vaadin-radio-button>
      <vaadin-radio-button value="flex-end" label="End"></vaadin-radio-button>
      <vaadin-radio-button value="stretch" label="Stretch"></vaadin-radio-button>
    </vaadin-radio-group>
  `;
}
```

**Java** — `BasicLayoutsVerticalLayoutHorizontalAlignment.java`

```java
VerticalLayout layout = new VerticalLayout();
layout.add(new Button("Button 1"));
layout.add(new Button("Button 2"));
layout.add(new Button("Button 3"));

...

radioGroup.addValueChangeListener(e -> {
    FlexComponent.Alignment alignment = e.getValue().getAlignment();
    layout.setAlignItems(alignment);
});
```

| Value             | Description                                                                                 |
| ----------------- | ------------------------------------------------------------------------------------------- |
| `START` (default) | Left-aligns (in left-to-right languages) or right-aligns (in right-to-left languages) items |
| `CENTER`          | Horizontally centers items                                                                  |
| `END`             | Right-aligns (in left-to-right languages) or left-aligns (in right-to-left languages) items |
| `STRETCH`         | Stretches items with undefined width horizontally                                           |

It’s also possible to horizontally align individual components, overriding the alignment set by the parent layout.

**TypeScript** — `basic-layouts-vertical-layout-individual-alignment.ts`

```typescript
@state()
alignLayoutItems = 'flex-start';

@state()
alignFirstItem = 'auto';

protected override render() {
  return html`
    <vaadin-vertical-layout theme="spacing padding" style="align-items: ${this.alignLayoutItems}">
      <vaadin-button style="align-self: ${this.alignFirstItem}" theme="primary">
        Button 1
      </vaadin-button>
      <vaadin-button>Button 2</vaadin-button>
      <vaadin-button>Button 3</vaadin-button>
    </vaadin-vertical-layout>
    <vaadin-radio-group
      label="Layout alignment"
      .value="${this.alignLayoutItems}"
      @value-changed="${(event: RadioGroupValueChangedEvent) => {
        this.alignLayoutItems = event.detail.value;
      }}"
    >
      <vaadin-radio-button value="flex-start" label="Start (default)"></vaadin-radio-button>
      <vaadin-radio-button value="center" label="Center"></vaadin-radio-button>
      <vaadin-radio-button value="flex-end" label="End"></vaadin-radio-button>
      <vaadin-radio-button value="stretch" label="Stretch"></vaadin-radio-button>
    </vaadin-radio-group>
    <vaadin-radio-group
      label="Item 1: alignment"
      .value="${this.alignFirstItem}"
      @value-changed="${(event: RadioGroupValueChangedEvent) => {
        this.alignFirstItem = event.detail.value;
      }}"
    >
      <vaadin-radio-button value="auto" label="Auto (default)"></vaadin-radio-button>
      <vaadin-radio-button value="flex-start" label="Start"></vaadin-radio-button>
      <vaadin-radio-button value="center" label="Center"></vaadin-radio-button>
      <vaadin-radio-button value="flex-end" label="End"></vaadin-radio-button>
      <vaadin-radio-button value="stretch" label="Stretch"></vaadin-radio-button>
    </vaadin-radio-group>
  `;
}
```

**Java** — `BasicLayoutsVerticalLayoutIndividualAlignment.java`

```java
Button button1 = new Button("Button 1");
button1.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
VerticalLayout layout = new VerticalLayout();
layout.add(button1);
layout.add(new Button("Button 2"));
layout.add(new Button("Button 3"));

...

layoutRadioGroup.addValueChangeListener(e -> {
    FlexComponent.Alignment alignment = e.getValue().getAlignment();
    layout.setAlignItems(alignment);
});

...

itemRadioGroup.addValueChangeListener(e -> {
    FlexComponent.Alignment alignment = e.getValue().getAlignment();
    layout.setAlignSelf(alignment, button1);
});
```

## <a id="horizontal-layout"></a>Horizontal Layout

Horizontal Layout places components side-by-side in a row. By default, it has undefined width and height, meaning its size is determined by the components it contains.

**TypeScript** — `basic-layouts-horizontal-layout.ts`

```html
<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-button>Button 4</vaadin-button>
</vaadin-horizontal-layout>
```

**Java** — `BasicLayoutsHorizontalLayout.java`

```java
HorizontalLayout layout = new HorizontalLayout();
layout.setPadding(true);
layout.add(new Button("Button 1"));
layout.add(new Button("Button 2"));
layout.add(new Button("Button 3"));
layout.add(new Button("Button 4"));
```

Like Vertical Layout, Horizontal Layout enables both vertical and horizontal alignment of components.

### <a id="vertical-alignment-2"></a>Vertical Alignment

You can position components at the top, middle, or bottom. Items can alternatively be made to stretch vertically or be positioned along the layout’s text baseline.

**TypeScript** — `basic-layouts-horizontal-layout-vertical-alignment.ts`

```typescript
@state()
private alignItems = 'stretch';

protected override render() {
  return html`
    <vaadin-horizontal-layout
      theme="spacing padding"
      class="height-5xl"
      style="align-items: ${this.alignItems}"
    >
      <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>
    <vaadin-radio-group
      label="Vertical alignment"
      .value="${this.alignItems}"
      @value-changed="${(event: RadioGroupValueChangedEvent) => {
        this.alignItems = event.detail.value;
      }}"
    >
      <vaadin-radio-button value="stretch" label="Stretch (default)"></vaadin-radio-button>
      <vaadin-radio-button value="flex-start" label="Start"></vaadin-radio-button>
      <vaadin-radio-button value="center" label="Center"></vaadin-radio-button>
      <vaadin-radio-button value="flex-end" label="End"></vaadin-radio-button>
      <vaadin-radio-button value="baseline" label="Baseline"></vaadin-radio-button>
    </vaadin-radio-group>
  `;
}
```

**Java** — `BasicLayoutsHorizontalLayoutVerticalAlignment.java`

```java
HorizontalLayout layout = new HorizontalLayout();
layout.setPadding(true);
layout.add(new TextArea("Text area 1"));
layout.add(new TextArea("Text area 2"));
layout.add(new TextArea("Text area 3"));

...

radioGroup.addValueChangeListener(e -> {
    FlexComponent.Alignment alignment = e.getValue().getAlignment();
    layout.setAlignItems(alignment);
});
```

| Value               | Description                                        |
| ------------------- | -------------------------------------------------- |
| `STRETCH` (default) | Stretches items with undefined height horizontally |
| `START`             | Positions items at the top of the layout           |
| `CENTER`            | Vertically centers items                           |
| `END`               | Positions items at the bottom of the layout        |
| `BASELINE`          | Position items along the layout’s (text) baseline. |

It’s also possible to vertically align individual components, overriding the alignment set by the parent layout.

**TypeScript** — `basic-layouts-horizontal-layout-individual-alignment.ts`

```typescript
@state()
private alignLayoutItems = 'stretch';

@state()
private alignFirstItem = 'auto';

protected override render() {
  return html`
    <vaadin-horizontal-layout
      theme="spacing padding"
      class="height-5xl"
      style="align-items: ${this.alignLayoutItems}"
    >
      <vaadin-text-area
        label="Text area 1"
        style="align-self: ${this.alignFirstItem}"
      ></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>
    <vaadin-radio-group
      label="Vertical alignment"
      .value="${this.alignLayoutItems}"
      @value-changed="${(event: RadioGroupValueChangedEvent) => {
        this.alignLayoutItems = event.detail.value;
      }}"
    >
      <vaadin-radio-button value="stretch" label="Stretch (default)"></vaadin-radio-button>
      <vaadin-radio-button value="flex-start" label="Start"></vaadin-radio-button>
      <vaadin-radio-button value="center" label="Center"></vaadin-radio-button>
      <vaadin-radio-button value="flex-end" label="End"></vaadin-radio-button>
      <vaadin-radio-button value="baseline" label="Baseline"></vaadin-radio-button>
    </vaadin-radio-group>
    <vaadin-radio-group
      label="Item 1: alignment"
      .value="${this.alignFirstItem}"
      @value-changed="${(event: RadioGroupValueChangedEvent) => {
        this.alignFirstItem = event.detail.value;
      }}"
    >
      <vaadin-radio-button value="auto" label="Auto (default)"></vaadin-radio-button>
      <vaadin-radio-button value="stretch" label="Stretch"></vaadin-radio-button>
      <vaadin-radio-button value="flex-start" label="Start"></vaadin-radio-button>
      <vaadin-radio-button value="center" label="Center"></vaadin-radio-button>
      <vaadin-radio-button value="flex-end" label="End"></vaadin-radio-button>
      <vaadin-radio-button value="baseline" label="Baseline"></vaadin-radio-button>
    </vaadin-radio-group>
  `;
}
```

**Java** — `BasicLayoutsHorizontalLayoutIndividualAlignment.java`

```java
TextArea textArea1 = new TextArea("Text area 1");
HorizontalLayout layout = new HorizontalLayout();
layout.setPadding(true);
layout.add(textArea1);
layout.add(new TextArea("Text area 2"));
layout.add(new TextArea("Text area 3"));

...

layoutRadioGroup.addValueChangeListener(e -> {
    FlexComponent.Alignment alignment = e.getValue().getAlignment();
    layout.setAlignItems(alignment);
});

itemRadioGroup.addValueChangeListener(e -> {
    FlexComponent.Alignment alignment = e.getValue().getAlignment();
    layout.setAlignSelf(alignment, textArea1);
});
```

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

Components in a Horizontal Layout can be left-aligned, centered or right-aligned. Alternatively, you can position components by specifying how a layout’s excess space is distributed between them.

**TypeScript** — `basic-layouts-horizontal-layout-horizontal-alignment.ts`

```typescript
@state()
private justifyContent = 'flex-start';

protected override render() {
  return html`
    <vaadin-horizontal-layout
      theme="spacing padding"
      style="justify-content: ${this.justifyContent}"
    >
      <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="Horizontal alignment"
      .value="${this.justifyContent}"
      @value-changed="${(event: RadioGroupValueChangedEvent) => {
        this.justifyContent = event.detail.value;
      }}"
    >
      <vaadin-radio-button value="flex-start" label="Start (default)"></vaadin-radio-button>
      <vaadin-radio-button value="center" label="Center"></vaadin-radio-button>
      <vaadin-radio-button value="flex-end" label="End"></vaadin-radio-button>
      <vaadin-radio-button value="space-between" label="Between"></vaadin-radio-button>
      <vaadin-radio-button value="space-around" label="Around"></vaadin-radio-button>
      <vaadin-radio-button value="space-evenly" label="Evenly"></vaadin-radio-button>
    </vaadin-radio-group>
  `;
}
```

**Java** — `BasicLayoutsHorizontalLayoutHorizontalAlignment.java`

```java
HorizontalLayout layout = new HorizontalLayout();
layout.setPadding(true);
layout.add(new Button("Button 1"));
layout.add(new Button("Button 2"));
layout.add(new Button("Button 3"));

...

radioGroup.addValueChangeListener(e -> {
    FlexComponent.JustifyContentMode mode = e.getValue().getMode();
    layout.setJustifyContentMode(mode);
});
```

| Value             | Description                                                                                                                              |
| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| `START` (default) | Left-aligns (in left-to-right languages) or right-aligns (in right-to-left languages) items                                              |
| `END`             | Right-aligns (in left-to-right languages) or left-aligns (in right-to-left languages) items                                              |
| `CENTER`          | Horizontally centers 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 between 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. |

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

Spacing is used to create space between components in the same layout. Spacing can help prevent mis-clicks and distinguish content areas.

**TypeScript** — `basic-layouts-spacing.ts`

```typescript
@state()
private theme = 'spacing';

protected override render() {
  return html`
    <vaadin-vertical-layout
      theme="${this.theme} padding"
      class="height-4xl"
      style="align-items: stretch"
    >
      <vaadin-button>Button 1</vaadin-button>
      <vaadin-button>Button 2</vaadin-button>
      <vaadin-button>Button 3</vaadin-button>
    </vaadin-vertical-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>
  `;
}
```

**Java** — `BasicLayoutsSpacing.java`

```java
VerticalLayout layout = new VerticalLayout();
layout.setAlignItems(FlexComponent.Alignment.STRETCH);
layout.add(new Button("Button 1"));
layout.add(new Button("Button 2"));
layout.add(new Button("Button 3"));

RadioButtonGroup<String> radioButtonGroup = new RadioButtonGroup<>();
radioButtonGroup.setLabel("Spacing");
radioButtonGroup.setItems(ENABLED_OPTION, DISABLED_OPTION);
radioButtonGroup.setValue(ENABLED_OPTION);
radioButtonGroup.addValueChangeListener(
        e -> layout.setSpacing(ENABLED_OPTION.equals(e.getValue())));
```

Five different spacing theme variants are available:

**TypeScript** — `basic-layouts-spacing-variants.ts`

```typescript
@state()
private themeVariant = 'spacing-xl';

protected override render() {
  return html`
    <vaadin-vertical-layout
      theme="${this.themeVariant} padding"
      class="height-5xl"
      style="align-items: stretch"
    >
      <vaadin-button>Button 1</vaadin-button>
      <vaadin-button>Button 2</vaadin-button>
      <vaadin-button>Button 3</vaadin-button>
    </vaadin-vertical-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>
  `;
}
```

**Java** — `BasicLayoutsSpacingVariants.java`

```java
VerticalLayout layout = new VerticalLayout();
layout.setSpacing(false);
layout.getThemeList().add(SPACING_XL_THEME);
layout.setAlignItems(FlexComponent.Alignment.STRETCH);
layout.add(new Button("Button 1"));
layout.add(new Button("Button 2"));
layout.add(new Button("Button 3"));

RadioButtonGroup<String> radioButtonGroup = new RadioButtonGroup<>();
radioButtonGroup.setLabel("Spacing variant");
radioButtonGroup.setItems(SPACING_XS_THEME, SPACING_S_THEME,
        SPACING_THEME, SPACING_L_THEME, SPACING_XL_THEME);
radioButtonGroup.setValue(SPACING_XL_THEME);
radioButtonGroup.addValueChangeListener(e -> {
    layout.getThemeList().remove(e.getOldValue());
    layout.getThemeList().add(e.getValue());
});
```

| Theme variant | Usage recommendations           |
| ------------- | ------------------------------- |
| `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 |

## <a id="padding"></a>Padding

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

**TypeScript** — `basic-layouts-padding.ts`

```typescript
@state()
private theme = 'padding';

protected override render() {
  return html`
    <vaadin-vertical-layout
      theme="${this.theme} spacing"
      class="height-4xl"
      style="align-items: stretch"
    >
      <vaadin-button>Button 1</vaadin-button>
      <vaadin-button>Button 2</vaadin-button>
      <vaadin-button>Button 3</vaadin-button>
    </vaadin-vertical-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>
  `;
}
```

**Java** — `BasicLayoutsPadding.java`

```java
VerticalLayout layout = new VerticalLayout();
layout.setAlignItems(FlexComponent.Alignment.STRETCH);
layout.add(new Button("Button 1"));
layout.add(new Button("Button 2"));
layout.add(new Button("Button 3"));

RadioButtonGroup<String> radioButtonGroup = new RadioButtonGroup<>();
radioButtonGroup.setLabel("Padding");
radioButtonGroup.setItems(ENABLED_OPTION, DISABLED_OPTION);
radioButtonGroup.setValue(ENABLED_OPTION);
radioButtonGroup.addValueChangeListener(
        e -> layout.setPadding(ENABLED_OPTION.equals(e.getValue())));
```

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

Use margin to create space around a layout.

**TypeScript** — `basic-layouts-margin.ts`

```typescript
@state()
private theme = 'margin';

protected override render() {
  return html`
    <div class="container">
      <vaadin-vertical-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-vertical-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>
  `;
}
```

**Java** — `BasicLayoutsMargin.java`

```java
VerticalLayout layout = new VerticalLayout();
layout.setWidth("auto");
layout.setMargin(true);
layout.setAlignItems(FlexComponent.Alignment.STRETCH);
layout.add(new Button("Button 1"));
layout.add(new Button("Button 2"));
layout.add(new Button("Button 3"));

RadioButtonGroup<String> radioButtonGroup = new RadioButtonGroup<>();
radioButtonGroup.setLabel("Margin");
radioButtonGroup.setItems(ENABLED_OPTION, DISABLED_OPTION);
radioButtonGroup.setValue(ENABLED_OPTION);
radioButtonGroup.addValueChangeListener(
        e -> layout.setMargin(ENABLED_OPTION.equals(e.getValue())));
```

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

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

**TypeScript** — `basic-layouts-expanding-items.ts`

```typescript
@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>
  `;
}
```

**Java** — `BasicLayoutsExpandingItems.java`

```java
Button button1 = new Button("Button 1");
HorizontalLayout layout = new HorizontalLayout();
layout.setPadding(true);
layout.add(button1);
layout.add(new Button("Button 2"));
layout.add(new Button("Button 3"));

RadioButtonGroup<String> radioButtonGroup = new RadioButtonGroup<>();
radioButtonGroup.setLabel("Item sizing");
radioButtonGroup.setItems(DEFAULT_SIZE_OPTION, EXPANDED_SIZE_OPTION);
radioButtonGroup.setValue(DEFAULT_SIZE_OPTION);
radioButtonGroup.addValueChangeListener(e -> layout.setFlexGrow(
        DEFAULT_SIZE_OPTION.equals(e.getValue()) ? 0 : 1, button1));
```

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.

`6F65485D-060C-4B0C-B77C-22FB219937D7`