Layouts: VerticalLayout and HorizontalLayout

A layout is a container that decides where components stand. It shows nothing by itself, it only arranges its content. The two main Vaadin layouts are VerticalLayout (top to bottom) and HorizontalLayout (left to right). Nesting them inside each other, you can build almost any screen.

A row inside a column

Let us put two fields in one line on the draft screen and two buttons below them:

// src/main/java/com/example/blog/views/DraftView.java
package com.example.blog.views;
 
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.html.H2;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextArea;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.Route;
 
@Route("draft")
public class DraftView extends VerticalLayout {
 
    public DraftView() {
        TextField title = new TextField("Title");
        TextField author = new TextField("Author");
        TextArea content = new TextArea("Text");
        content.setWidthFull();
 
        HorizontalLayout fields = new HorizontalLayout(title, author);
        HorizontalLayout buttons = new HorizontalLayout(new Button("Save"), new Button("Cancel"));
 
        add(new H2("New draft"), fields, content, buttons);
    }
}

At http://localhost:8080/draft you see a heading on top, the "Title" and "Author" fields side by side below it, then a wide text field and two buttons in a row.

Padding and spacing

Alignment

setAlignItems sets alignment across the layout, setJustifyContentMode along it:

// src/main/java/com/example/blog/views/DraftView.java (part of the constructor)
buttons.setWidthFull();
buttons.setJustifyContentMode(JustifyContentMode.END);
fields.setAlignItems(Alignment.BASELINE);

The buttons move to the right edge, and the fields line up by their text baseline — handy when one of them has a helper text below. The Alignment and JustifyContentMode constants need no import because DraftView extends VerticalLayout.

Stretching

To let one component take all free space in a row, use setFlexGrow or expand:

// src/main/java/com/example/blog/views/DraftView.java (part of the constructor)
fields.setWidthFull();
fields.expand(title);

The title field stretches, while the author field keeps its normal width.

Other layouts

Common mistake

Inside a HorizontalLayout, a field with setWidthFull() pushes its neighbors away or the row runs past the screen edge. 100% width on a row item means "the width of the whole row", not "the remaining space". To stretch an item in a row, use expand(...) instead of setWidthFull().