Basic Layouts

Vertical Layout
Horizontal Layout
Spacing
Padding
Margin
Expanding Items

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.

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.

Open in a
new tab

Source code

basic-layouts-vertical-layout.tsimport { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';
import '@vaadin/button';
import '@vaadin/vertical-layout';

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

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <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>
      <!-- end::snippet[] -->
    `;
  }
}
BasicLayoutsVerticalLayout.javapackage com.vaadin.demo.component.basiclayouts;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;

@Route("basic-layouts/vertical-layout")
public class BasicLayoutsVerticalLayout extends Div {
    public BasicLayoutsVerticalLayout() {
        // tag::snippet[]
        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"));
        // end::snippet[]

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

        this.add(layout);
    }

}

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

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.

Open in a
new tab

Source code

basic-layouts-vertical-layout-vertical-alignment.tsimport { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';
import '@vaadin/button';
import '@vaadin/radio-group';
import type { RadioGroupValueChangedEvent } from '@vaadin/radio-group';
import '@vaadin/vertical-layout';

@customElement('basic-layouts-vertical-layout-vertical-alignment')
export class Example extends LitElement {
  constructor() {
    super();
    this.classList.add('basic-layouts-example');
  }

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  // tag::snippet[]
  @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>
    `;
  }
  // end::snippet[]
}
BasicLayoutsVerticalLayoutVerticalAlignment.javapackage com.vaadin.demo.component.basiclayouts;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.orderedlayout.FlexComponent;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.radiobutton.RadioButtonGroup;
import com.vaadin.flow.router.Route;

import java.util.Arrays;
import java.util.List;

@Route("basic-layouts/vertical-layout-vertical-alignment")
public class BasicLayoutsVerticalLayoutVerticalAlignment extends Div {

    private static class JustifyContentModeOption {
        private final String label;
        private final FlexComponent.JustifyContentMode mode;

        public JustifyContentModeOption(String label,
                FlexComponent.JustifyContentMode mode) {
            this.label = label;
            this.mode = mode;
        }

        public FlexComponent.JustifyContentMode getMode() {
            return mode;
        }

        @Override
        public String toString() {
            return label;
        }
    }

    public BasicLayoutsVerticalLayoutVerticalAlignment() {
        // tag::layout[]
        VerticalLayout layout = new VerticalLayout();
        layout.add(new Button("Button 1"));
        layout.add(new Button("Button 2"));
        layout.add(new Button("Button 3"));
        // end::layout[]

        List<JustifyContentModeOption> options = Arrays.asList(
                new JustifyContentModeOption("Start (default)",
                        FlexComponent.JustifyContentMode.START),
                new JustifyContentModeOption("Center",
                        FlexComponent.JustifyContentMode.CENTER),
                new JustifyContentModeOption("End",
                        FlexComponent.JustifyContentMode.END),
                new JustifyContentModeOption("Between",
                        FlexComponent.JustifyContentMode.BETWEEN),
                new JustifyContentModeOption("Around",
                        FlexComponent.JustifyContentMode.AROUND),
                new JustifyContentModeOption("Evenly",
                        FlexComponent.JustifyContentMode.EVENLY));

        RadioButtonGroup<JustifyContentModeOption> radioGroup = new RadioButtonGroup<>();
        radioGroup.setLabel("Vertical alignment");
        radioGroup.setItems(options);
        radioGroup.setValue(options.get(0));
        radioGroup.addValueChangeListener(e -> {
            FlexComponent.JustifyContentMode mode = e.getValue().getMode();
            layout.setJustifyContentMode(mode);
        });

        this.setClassName("basic-layouts-example");
        layout.setClassName("height-5xl");

        this.add(layout, radioGroup);
    }

}

Value Description

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.

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.

Horizontal Alignment

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

Open in a
new tab

Source code

basic-layouts-vertical-layout-horizontal-alignment.tsimport { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';
import '@vaadin/button';
import '@vaadin/radio-group';
import type { RadioGroupValueChangedEvent } from '@vaadin/radio-group';
import '@vaadin/vertical-layout';

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

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  // tag::snippet[]
  @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>
    `;
  }
  // end::snippet[]
}
BasicLayoutsVerticalLayoutHorizontalAlignment.javapackage com.vaadin.demo.component.basiclayouts;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.orderedlayout.FlexComponent;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.radiobutton.RadioButtonGroup;
import com.vaadin.flow.router.Route;

import java.util.Arrays;
import java.util.List;

@Route("basic-layouts/vertical-layout-horizontal-alignment")
public class BasicLayoutsVerticalLayoutHorizontalAlignment extends Div {

    private static class AlignmentOption {
        private final String label;
        private final FlexComponent.Alignment alignment;

        public AlignmentOption(String label,
                FlexComponent.Alignment alignment) {
            this.label = label;
            this.alignment = alignment;
        }

        public FlexComponent.Alignment getAlignment() {
            return alignment;
        }

        @Override
        public String toString() {
            return label;
        }
    }

    public BasicLayoutsVerticalLayoutHorizontalAlignment() {
        // tag::layout[]
        VerticalLayout layout = new VerticalLayout();
        layout.add(new Button("Button 1"));
        layout.add(new Button("Button 2"));
        layout.add(new Button("Button 3"));
        // end::layout[]

        List<AlignmentOption> options = Arrays.asList(
                new AlignmentOption("Start (default)",
                        FlexComponent.Alignment.START),
                new AlignmentOption("Center", FlexComponent.Alignment.CENTER),
                new AlignmentOption("End", FlexComponent.Alignment.END),
                new AlignmentOption("Stretch",
                        FlexComponent.Alignment.STRETCH));

        RadioButtonGroup<AlignmentOption> radioGroup = new RadioButtonGroup<>();
        radioGroup.setLabel("Horizontal alignment");
        radioGroup.setItems(options);
        radioGroup.setValue(options.get(0));
        radioGroup.addValueChangeListener(e -> {
            FlexComponent.Alignment alignment = e.getValue().getAlignment();
            layout.setAlignItems(alignment);
        });

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

        this.add(layout, radioGroup);
    }

}

Value Description

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

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.

Open in a
new tab

Source code

basic-layouts-vertical-layout-individual-alignment.tsimport { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';
import '@vaadin/button';
import '@vaadin/radio-group';
import type { RadioGroupValueChangedEvent } from '@vaadin/radio-group';
import '@vaadin/vertical-layout';

@customElement('basic-layouts-vertical-layout-individual-alignment')
export class Example extends LitElement {
  constructor() {
    super();
    this.classList.add('basic-layouts-example');
  }

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  // tag::snippet[]
  @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>
    `;
  }
  // end::snippet[]
}
BasicLayoutsVerticalLayoutIndividualAlignment.javapackage com.vaadin.demo.component.basiclayouts;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.orderedlayout.FlexComponent;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.radiobutton.RadioButtonGroup;
import com.vaadin.flow.router.Route;

import java.util.Arrays;
import java.util.List;

@Route("basic-layouts/vertical-layout-individual-alignment")
public class BasicLayoutsVerticalLayoutIndividualAlignment extends Div {

    private static class AlignmentOption {
        private final String label;
        private final FlexComponent.Alignment alignment;

        public AlignmentOption(String label,
                FlexComponent.Alignment alignment) {
            this.label = label;
            this.alignment = alignment;
        }

        public FlexComponent.Alignment getAlignment() {
            return alignment;
        }

        @Override
        public String toString() {
            return label;
        }
    }

    public BasicLayoutsVerticalLayoutIndividualAlignment() {
        // tag::layout[]
        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"));
        // end::layout[]

        List<AlignmentOption> layoutOptions = Arrays.asList(
                new AlignmentOption("Start (default)",
                        FlexComponent.Alignment.START),
                new AlignmentOption("Center", FlexComponent.Alignment.CENTER),
                new AlignmentOption("End", FlexComponent.Alignment.END),
                new AlignmentOption("Stretch",
                        FlexComponent.Alignment.STRETCH));

        List<AlignmentOption> itemOptions = Arrays.asList(
                new AlignmentOption("Auto (default)",
                        FlexComponent.Alignment.AUTO),
                new AlignmentOption("Start", FlexComponent.Alignment.START),
                new AlignmentOption("Center", FlexComponent.Alignment.CENTER),
                new AlignmentOption("End", FlexComponent.Alignment.END),
                new AlignmentOption("Stretch",
                        FlexComponent.Alignment.STRETCH));

        RadioButtonGroup<AlignmentOption> layoutRadioGroup = new RadioButtonGroup<>();
        layoutRadioGroup.setLabel("Layout alignment");
        layoutRadioGroup.setItems(layoutOptions);
        layoutRadioGroup.setValue(layoutOptions.get(0));
        layoutRadioGroup.addValueChangeListener(e -> {
            FlexComponent.Alignment alignment = e.getValue().getAlignment();
            layout.setAlignItems(alignment);
        });

        RadioButtonGroup<AlignmentOption> itemRadioGroup = new RadioButtonGroup<>();
        itemRadioGroup.setLabel("Item 1: alignment");
        itemRadioGroup.setItems(itemOptions);
        itemRadioGroup.setValue(itemOptions.get(0));
        itemRadioGroup.addValueChangeListener(e -> {
            FlexComponent.Alignment alignment = e.getValue().getAlignment();
            layout.setAlignSelf(alignment, button1);
        });

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

        this.add(layout, layoutRadioGroup, itemRadioGroup);
    }

}

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.

Open in a
new tab

Source code

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

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

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <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>
      <!-- end::snippet[] -->
    `;
  }
}
BasicLayoutsHorizontalLayout.javapackage com.vaadin.demo.component.basiclayouts;

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

@Route("basic-layouts/horizontal-layout")
public class BasicLayoutsHorizontalLayout extends Div {
    public BasicLayoutsHorizontalLayout() {
        // tag::snippet[]
        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"));
        // end::snippet[]

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

        this.add(layout);
    }

}

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

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.

Open in a
new tab

Source code

basic-layouts-horizontal-layout-vertical-alignment.tsimport { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';
import '@vaadin/horizontal-layout';
import '@vaadin/radio-group';
import type { RadioGroupValueChangedEvent } from '@vaadin/radio-group';
import '@vaadin/text-area';

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

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  // tag::snippet[]
  @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>
    `;
  }
  // end::snippet[]
}
BasicLayoutsHorizontalLayoutVerticalAlignment.javapackage com.vaadin.demo.component.basiclayouts;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.orderedlayout.FlexComponent;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.radiobutton.RadioButtonGroup;
import com.vaadin.flow.component.textfield.TextArea;
import com.vaadin.flow.router.Route;

import java.util.Arrays;
import java.util.List;

@Route("basic-layouts/horizontal-layout-vertical-alignment")
public class BasicLayoutsHorizontalLayoutVerticalAlignment extends Div {

    private static class AlignmentOption {
        private final String label;
        private final FlexComponent.Alignment alignment;

        public AlignmentOption(String label,
                FlexComponent.Alignment alignment) {
            this.label = label;
            this.alignment = alignment;
        }

        public FlexComponent.Alignment getAlignment() {
            return alignment;
        }

        @Override
        public String toString() {
            return label;
        }
    }

    public BasicLayoutsHorizontalLayoutVerticalAlignment() {
        // tag::layout[]
        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"));
        // end::layout[]

        List<AlignmentOption> options = Arrays.asList(
                new AlignmentOption("Stretch (default)",
                        FlexComponent.Alignment.STRETCH),
                new AlignmentOption("Start", FlexComponent.Alignment.START),
                new AlignmentOption("Center", FlexComponent.Alignment.CENTER),
                new AlignmentOption("End", FlexComponent.Alignment.END),
                new AlignmentOption("Baseline",
                        FlexComponent.Alignment.BASELINE));

        RadioButtonGroup<AlignmentOption> radioGroup = new RadioButtonGroup<>();
        radioGroup.setLabel("Vertical alignment");
        radioGroup.setItems(options);
        radioGroup.setValue(options.get(0));
        radioGroup.addValueChangeListener(e -> {
            FlexComponent.Alignment alignment = e.getValue().getAlignment();
            layout.setAlignItems(alignment);
        });

        this.setClassName("basic-layouts-example");
        layout.setClassName("height-5xl");

        this.add(layout, radioGroup);
    }

}

Value Description

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.

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.

Open in a
new tab

Source code

basic-layouts-horizontal-layout-individual-alignment.tsimport { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';
import '@vaadin/horizontal-layout';
import '@vaadin/radio-group';
import type { RadioGroupValueChangedEvent } from '@vaadin/radio-group';
import '@vaadin/text-area';

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

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  // tag::snippet[]
  @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>
    `;
  }
  // end::snippet[]
}
BasicLayoutsHorizontalLayoutIndividualAlignment.javapackage com.vaadin.demo.component.basiclayouts;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.orderedlayout.FlexComponent;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.radiobutton.RadioButtonGroup;
import com.vaadin.flow.component.textfield.TextArea;
import com.vaadin.flow.router.Route;

import java.util.Arrays;
import java.util.List;

@Route("basic-layouts/horizontal-layout-individual-alignment")
public class BasicLayoutsHorizontalLayoutIndividualAlignment extends Div {

    private static class AlignmentOption {
        private final String label;
        private final FlexComponent.Alignment alignment;

        public AlignmentOption(String label,
                FlexComponent.Alignment alignment) {
            this.label = label;
            this.alignment = alignment;
        }

        public FlexComponent.Alignment getAlignment() {
            return alignment;
        }

        @Override
        public String toString() {
            return label;
        }
    }

    public BasicLayoutsHorizontalLayoutIndividualAlignment() {
        // tag::layout[]
        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"));
        // end::layout[]

        List<AlignmentOption> layoutOptions = Arrays.asList(
                new AlignmentOption("Stretch (default)",
                        FlexComponent.Alignment.STRETCH),
                new AlignmentOption("Start", FlexComponent.Alignment.START),
                new AlignmentOption("Center", FlexComponent.Alignment.CENTER),
                new AlignmentOption("End", FlexComponent.Alignment.END),
                new AlignmentOption("Baseline",
                        FlexComponent.Alignment.BASELINE));

        List<AlignmentOption> itemOptions = Arrays.asList(
                new AlignmentOption("Auto (default)",
                        FlexComponent.Alignment.AUTO),
                new AlignmentOption("Stretch", FlexComponent.Alignment.STRETCH),
                new AlignmentOption("Start", FlexComponent.Alignment.START),
                new AlignmentOption("Center", FlexComponent.Alignment.CENTER),
                new AlignmentOption("End", FlexComponent.Alignment.END),
                new AlignmentOption("Baseline",
                        FlexComponent.Alignment.BASELINE));

        RadioButtonGroup<AlignmentOption> layoutRadioGroup = new RadioButtonGroup<>();
        layoutRadioGroup.setLabel("Vertical alignment");
        layoutRadioGroup.setItems(layoutOptions);
        layoutRadioGroup.setValue(layoutOptions.get(0));
        layoutRadioGroup.addValueChangeListener(e -> {
            FlexComponent.Alignment alignment = e.getValue().getAlignment();
            layout.setAlignItems(alignment);
        });

        RadioButtonGroup<AlignmentOption> itemRadioGroup = new RadioButtonGroup<>();
        itemRadioGroup.setLabel("Item 1: alignment");
        itemRadioGroup.setItems(itemOptions);
        itemRadioGroup.setValue(itemOptions.get(0));
        itemRadioGroup.addValueChangeListener(e -> {
            FlexComponent.Alignment alignment = e.getValue().getAlignment();
            layout.setAlignSelf(alignment, textArea1);
        });

        this.setClassName("basic-layouts-example");
        layout.setClassName("height-5xl");

        this.add(layout, layoutRadioGroup, itemRadioGroup);
    }

}

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.

Open in a
new tab

Source code

basic-layouts-horizontal-layout-horizontal-alignment.tsimport { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';
import '@vaadin/button';
import '@vaadin/horizontal-layout';
import '@vaadin/radio-group';
import type { RadioGroupValueChangedEvent } from '@vaadin/radio-group';

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

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  // tag::snippet[]
  @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>
    `;
  }
  // end::snippet[]
}
BasicLayoutsHorizontalLayoutHorizontalAlignment.javapackage com.vaadin.demo.component.basiclayouts;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.orderedlayout.FlexComponent;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.radiobutton.RadioButtonGroup;
import com.vaadin.flow.router.Route;

import java.util.Arrays;
import java.util.List;

@Route("basic-layouts/horizontal-layout-horizontal-alignment")
public class BasicLayoutsHorizontalLayoutHorizontalAlignment extends Div {

    private static class JustifyContentModeOption {
        private final String label;
        private final FlexComponent.JustifyContentMode mode;

        public JustifyContentModeOption(String label,
                FlexComponent.JustifyContentMode mode) {
            this.label = label;
            this.mode = mode;
        }

        public FlexComponent.JustifyContentMode getMode() {
            return mode;
        }

        @Override
        public String toString() {
            return label;
        }
    }

    public BasicLayoutsHorizontalLayoutHorizontalAlignment() {
        // tag::layout[]
        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"));
        // end::layout[]

        List<JustifyContentModeOption> options = Arrays.asList(
                new JustifyContentModeOption("Start (default)",
                        FlexComponent.JustifyContentMode.START),
                new JustifyContentModeOption("Center",
                        FlexComponent.JustifyContentMode.CENTER),
                new JustifyContentModeOption("End",
                        FlexComponent.JustifyContentMode.END),
                new JustifyContentModeOption("Between",
                        FlexComponent.JustifyContentMode.BETWEEN),
                new JustifyContentModeOption("Around",
                        FlexComponent.JustifyContentMode.AROUND),
                new JustifyContentModeOption("Evenly",
                        FlexComponent.JustifyContentMode.EVENLY));

        RadioButtonGroup<JustifyContentModeOption> radioGroup = new RadioButtonGroup<>();
        radioGroup.setLabel("Horizontal alignment");
        radioGroup.setItems(options);
        radioGroup.setValue(options.get(0));
        radioGroup.addValueChangeListener(e -> {
            FlexComponent.JustifyContentMode mode = e.getValue().getMode();
            layout.setJustifyContentMode(mode);
        });

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

        this.add(layout, radioGroup);
    }

}

Value Description

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.

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.

Spacing

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

Open in a
new tab

Source code

basic-layouts-spacing.tsimport { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';
import '@vaadin/button';
import '@vaadin/radio-group';
import type { RadioGroupValueChangedEvent } from '@vaadin/radio-group';
import '@vaadin/vertical-layout';

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

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  // tag::snippet[]
  @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>
    `;
  }
  // end::snippet[]
}
BasicLayoutsSpacing.javapackage com.vaadin.demo.component.basiclayouts;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.orderedlayout.FlexComponent;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.radiobutton.RadioButtonGroup;
import com.vaadin.flow.router.Route;

@Route("basic-layouts/spacing")
public class BasicLayoutsSpacing extends Div {

    private static final String ENABLED_OPTION = "Enabled";
    private static final String DISABLED_OPTION = "Disabled";

    public BasicLayoutsSpacing() {
        // tag::snippet[]
        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())));
        // end::snippet[]

        this.setClassName("basic-layouts-example");
        layout.setClassName("height-4xl");

        this.add(layout, radioButtonGroup);
    }

}

Five different spacing theme variants are available:

Open in a
new tab

Source code

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

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

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  // tag::snippet[]
  @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>
    `;
  }
  // end::snippet[]
}
BasicLayoutsSpacingVariants.javapackage com.vaadin.demo.component.basiclayouts;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.orderedlayout.FlexComponent;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.radiobutton.RadioButtonGroup;
import com.vaadin.flow.router.Route;

@Route("basic-layouts/spacing-variants")
public class BasicLayoutsSpacingVariants extends Div {

    private static final String SPACING_XS_THEME = "spacing-xs";
    private static final String SPACING_S_THEME = "spacing-s";
    private static final String SPACING_THEME = "spacing";
    private static final String SPACING_L_THEME = "spacing-l";
    private static final String SPACING_XL_THEME = "spacing-xl";

    public BasicLayoutsSpacingVariants() {
        // tag::snippet[]
        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());
        });
        // end::snippet[]

        this.setClassName("basic-layouts-example");
        layout.setClassName("height-5xl");

        this.add(layout, radioButtonGroup);
    }

}

Theme variant Usage recommendations

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

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

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.

Open in a
new tab

Source code

basic-layouts-padding.tsimport { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';
import '@vaadin/button';
import '@vaadin/radio-group';
import type { RadioGroupValueChangedEvent } from '@vaadin/radio-group';
import '@vaadin/vertical-layout';

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

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  // tag::snippet[]
  @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>
    `;
  }

  // end::snippet[]
}
BasicLayoutsPadding.javapackage com.vaadin.demo.component.basiclayouts;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.orderedlayout.FlexComponent;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.radiobutton.RadioButtonGroup;
import com.vaadin.flow.router.Route;

@Route("basic-layouts/padding")
public class BasicLayoutsPadding extends Div {

    private static final String ENABLED_OPTION = "Enabled";
    private static final String DISABLED_OPTION = "Disabled";

    public BasicLayoutsPadding() {
        // tag::snippet[]
        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())));
        // end::snippet[]

        this.setClassName("basic-layouts-example");
        layout.setClassName("height-4xl");

        this.add(layout, radioButtonGroup);
    }

}

Margin

Use margin to create space around a layout.

Open in a
new tab

Source code

basic-layouts-margin.tsimport { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';
import '@vaadin/button';
import '@vaadin/radio-group';
import type { RadioGroupValueChangedEvent } from '@vaadin/radio-group';
import '@vaadin/vertical-layout';

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

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  // tag::snippet[]
  @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>
    `;
  }
  // end::snippet[]
}
BasicLayoutsMargin.javapackage com.vaadin.demo.component.basiclayouts;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.orderedlayout.FlexComponent;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.radiobutton.RadioButtonGroup;
import com.vaadin.flow.router.Route;

@Route("basic-layouts/margin")
public class BasicLayoutsMargin extends Div {

    private static final String ENABLED_OPTION = "Enabled";
    private static final String DISABLED_OPTION = "Disabled";

    public BasicLayoutsMargin() {
        // tag::snippet[]
        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())));
        // end::snippet[]

        Div container = new Div();
        container.add(layout);

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

        this.add(container, radioButtonGroup);
    }

}

Expanding Items

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

Open in a
new tab

Source code

basic-layouts-expanding-items.tsimport { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';
import '@vaadin/button';
import '@vaadin/horizontal-layout';
import '@vaadin/radio-group';
import type { RadioGroupValueChangedEvent } from '@vaadin/radio-group';

@customElement('basic-layouts-expanding-items')
export class Example extends LitElement {
  constructor() {
    super();
    this.classList.add('basic-layouts-example');
  }

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  // tag::snippet[]
  @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>
    `;
  }
  // end::snippet[]
}
BasicLayoutsExpandingItems.javapackage com.vaadin.demo.component.basiclayouts;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.radiobutton.RadioButtonGroup;
import com.vaadin.flow.router.Route;

@Route("basic-layouts/expanding-items")
public class BasicLayoutsExpandingItems extends Div {

    private static final String DEFAULT_SIZE_OPTION = "Default size";
    private static final String EXPANDED_SIZE_OPTION = "Expand";

    public BasicLayoutsExpandingItems() {
        // tag::snippet[]
        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));
        // end::snippet[]

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

        this.add(layout, radioButtonGroup);
    }

}

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

Documentation

Documentation

Basic Layouts

Vertical Layout

Vertical Alignment

Horizontal Alignment

Horizontal Layout

Vertical Alignment

Horizontal Alignment

Spacing

Padding

Margin

Expanding Items