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.
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.
new tab
<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>
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.
new tab
@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>
`;
}
Value | Description |
---|---|
| Positions items at the top. |
| Vertically centers items. |
| Positions items at the bottom. |
| Available space is distributed evenly between items. No space is added before the first item, or after the last. |
| Available space is distributed evenly between items. The space before the first item, and after the last, is half of that between items. |
| 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.
new tab
@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>
`;
}
Value | Description |
---|---|
| Left-aligns (in left-to-right languages) or right-aligns (in right-to-left languages) items |
| Horizontally centers items |
| Right-aligns (in left-to-right languages) or left-aligns (in right-to-left languages) items |
| Stretches items with undefined width horizontally |
It’s also possible to horizontally align individual components, overriding the alignment set by the parent layout.
new tab
@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>
`;
}
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.
new tab
<vaadin-horizontal-layout theme="spacing padding">
<vaadin-button>Button 1</vaadin-button>
<vaadin-button>Button 2</vaadin-button>
<vaadin-button>Button 3</vaadin-button>
<vaadin-button>Button 4</vaadin-button>
</vaadin-horizontal-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.
new tab
@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>
`;
}
Value | Description |
---|---|
| Stretches items with undefined height horizontally |
| Positions items at the top of the layout |
| Vertically centers items |
| Positions items at the bottom of the layout |
| 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.
new tab
@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>
`;
}
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.
new tab
@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>
`;
}
Value | Description |
---|---|
| Left-aligns (in left-to-right languages) or right-aligns (in right-to-left languages) items |
| Right-aligns (in left-to-right languages) or left-aligns (in right-to-left languages) items |
| Horizontally centers items |
| Available space is distributed evenly between items. No space is added before the first item, or after the last. |
| Available space is distributed evenly between items. The space before the first item, and after the last, is half of that between items. |
| 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.
new tab
@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>
`;
}
Five different spacing theme variants are available:
new tab
@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>
`;
}
Theme variant | Usage recommendations |
---|---|
| Extra-small space between items |
| Small space between items |
| Medium space between items |
| Large space between items |
| 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.
new tab
@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>
`;
}
Margin
Use margin to create space around a layout.
new tab
@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>
`;
}
Expanding Items
Components can be made to expand and take up any excess space a layout may have.
new tab
@state()
private size = '0';
protected override render() {
return html`
<vaadin-horizontal-layout theme="padding spacing">
<vaadin-button style="flex-grow: ${this.size}">Button 1</vaadin-button>
<vaadin-button>Button 2</vaadin-button>
<vaadin-button>Button 3</vaadin-button>
</vaadin-horizontal-layout>
<vaadin-radio-group
label="Item sizing"
.value="${this.size}"
@value-changed="${(event: RadioGroupValueChangedEvent) => {
this.size = event.detail.value;
}}"
>
<vaadin-radio-button value="0" label="Default size"></vaadin-radio-button>
<vaadin-radio-button value="1" label="Expand"></vaadin-radio-button>
</vaadin-radio-group>
`;
}
When multiple components expand, they do so relative to each other. For example, having two items with expand ratios of 2 and 1 results in the first item taking up twice as much of the available space as the second item.
6F65485D-060C-4B0C-B77C-22FB219937D7