0
# Layout System
1

2
Vaadin's layout system provides flexible component arrangement with responsive design support. All layouts are based on CSS Flexbox and Grid, with Java APIs that abstract the underlying CSS complexity.
3

4
## Core Imports
5

6
```java
7
// Basic layout components
8
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
9
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
10
import com.vaadin.flow.component.orderedlayout.FlexLayout;
11

12
// Form and specialized layouts
13
import com.vaadin.flow.component.formlayout.FormLayout;
14
import com.vaadin.flow.component.splitlayout.SplitLayout;
15
import com.vaadin.flow.component.applayout.AppLayout;
16
import com.vaadin.flow.component.applayout.DrawerToggle;
17

18
// Content organization components
19
import com.vaadin.flow.component.accordion.Accordion;
20
import com.vaadin.flow.component.accordion.AccordionPanel;
21
import com.vaadin.flow.component.tabs.Tabs;
22
import com.vaadin.flow.component.tabs.Tab;
23
import com.vaadin.flow.component.tabs.TabSheet;
24
import com.vaadin.flow.component.details.Details;
25
import com.vaadin.flow.component.html.Div;
26

27
// Scrolling and utility components
28
import com.vaadin.flow.component.Component;
29
import com.vaadin.flow.component.HasOrderedComponents;
30
import com.vaadin.flow.component.HasSize;
31
import com.vaadin.flow.component.button.Button;
32

33
// Layout enums and interfaces
34
import com.vaadin.flow.component.orderedlayout.FlexComponent.Alignment;
35
import com.vaadin.flow.component.orderedlayout.FlexComponent.JustifyContentMode;
36
import com.vaadin.flow.component.orderedlayout.FlexLayout.FlexDirection;
37
import com.vaadin.flow.component.orderedlayout.FlexLayout.FlexWrap;
38
import com.vaadin.flow.component.formlayout.FormLayout.FormItem;
39
import com.vaadin.flow.component.formlayout.FormLayout.ResponsiveStep;
40
import com.vaadin.flow.component.splitlayout.SplitLayout.Orientation;
41
import com.vaadin.flow.router.RouterLayout;
42
```
43

44
## Basic Layouts
45

46
### VerticalLayout
47

48
Arranges components vertically with flexible spacing and alignment options.
49

50
```java { .api }
51
public class VerticalLayout extends Component implements HasOrderedComponents<VerticalLayout>, HasSize {
52
    public VerticalLayout();
53
    public VerticalLayout(Component... children);
54

55
    // Component management
56
    public void add(Component... components);
57
    public void addComponentAsFirst(Component component);
58
    public void remove(Component... components);
59
    public void removeAll();
60
    public void replace(Component oldComponent, Component newComponent);
61

62
    // Layout configuration
63
    public void setSpacing(boolean spacing);
64
    public boolean isSpacing();
65
    public void setPadding(boolean padding);
66
    public boolean isPadding();
67
    public void setMargin(boolean margin);
68
    public boolean isMargin();
69

70
    // Alignment
71
    public void setAlignItems(FlexComponent.Alignment alignment);
72
    public FlexComponent.Alignment getAlignItems();
73
    public void setAlignSelf(FlexComponent.Alignment alignment, Component... components);
74
    public void setJustifyContentMode(FlexComponent.JustifyContentMode justifyContentMode);
75
    public FlexComponent.JustifyContentMode getJustifyContentMode();
76

77
    // Flexibility
78
    public void setFlexGrow(double flexGrow, Component... components);
79
    public void expand(Component... componentsToExpand);
80
}
81
```
82

83
### HorizontalLayout
84

85
Arranges components horizontally with flexible spacing and alignment options.
86

87
```java { .api }
88
public class HorizontalLayout extends Component implements HasOrderedComponents<HorizontalLayout>, HasSize {
89
    public HorizontalLayout();
90
    public HorizontalLayout(Component... children);
91

92
    // Component management
93
    public void add(Component... components);
94
    public void addComponentAsFirst(Component component);
95
    public void remove(Component... components);
96
    public void removeAll();
97
    public void replace(Component oldComponent, Component newComponent);
98

99
    // Layout configuration
100
    public void setSpacing(boolean spacing);
101
    public boolean isSpacing();
102
    public void setPadding(boolean padding);
103
    public boolean isPadding();
104
    public void setMargin(boolean margin);
105
    public boolean isMargin();
106

107
    // Alignment
108
    public void setAlignItems(FlexComponent.Alignment alignment);
109
    public FlexComponent.Alignment getAlignItems();
110
    public void setAlignSelf(FlexComponent.Alignment alignment, Component... components);
111
    public void setJustifyContentMode(FlexComponent.JustifyContentMode justifyContentMode);
112

113
    // Flexibility
114
    public void setFlexGrow(double flexGrow, Component... components);
115
    public void expand(Component... componentsToExpand);
116
}
117
```
118

119
### FlexLayout
120

121
Advanced flexbox layout with full control over flex properties and responsive behavior.
122

123
```java { .api }
124
public class FlexLayout extends Component implements HasOrderedComponents<FlexLayout>, HasSize {
125
    public FlexLayout();
126
    public FlexLayout(Component... children);
127

128
    // Component management
129
    public void add(Component... components);
130
    public void remove(Component... components);
131
    public void removeAll();
132

133
    // Flex container properties
134
    public void setFlexDirection(FlexDirection flexDirection);
135
    public FlexDirection getFlexDirection();
136
    public void setFlexWrap(FlexWrap flexWrap);
137
    public FlexWrap getFlexWrap();
138
    public void setJustifyContentMode(JustifyContentMode justifyContentMode);
139
    public void setAlignItems(Alignment alignItems);
140
    public void setAlignContent(ContentAlignment alignContent);
141

142
    // Flex item properties
143
    public void setFlexGrow(double flexGrow, Component... components);
144
    public void setFlexShrink(double flexShrink, Component... components);
145
    public void setFlexBasis(String flexBasis, Component... components);
146
    public void setOrder(int order, Component... components);
147
    public void setAlignSelf(Alignment alignSelf, Component... components);
148
}
149
```
150

151
## Form Layouts
152

153
### FormLayout
154

155
Responsive form layout that automatically adjusts column count based on screen size.
156

157
```java { .api }
158
public class FormLayout extends Component implements HasOrderedComponents<FormLayout>, HasSize {
159
    public FormLayout();
160
    public FormLayout(Component... children);
161

162
    // Component management
163
    public void add(Component... components);
164
    public void addFormItem(Component field, String label);
165
    public FormItem addFormItem(Component field, Component label);
166
    public void remove(Component... components);
167

168
    // Responsive behavior
169
    public void setResponsiveSteps(ResponsiveStep... responsiveSteps);
170
    public List<ResponsiveStep> getResponsiveSteps();
171
    public void setColspan(Component component, int colspan);
172

173
    // Layout configuration
174
    public void setLabelsPosition(LabelsPosition labelsPosition);
175
    public LabelsPosition getLabelsPosition();
176
}
177

178
public static class ResponsiveStep {
179
    public ResponsiveStep(String minWidth, int columns);
180
    public ResponsiveStep(String minWidth, int columns, LabelsPosition labelsPosition);
181

182
    public String getMinWidth();
183
    public int getColumns();
184
    public LabelsPosition getLabelsPosition();
185
}
186

187
public static class FormItem extends Component {
188
    public void add(Component... components);
189
    public void addToLabel(Component... components);
190
    public void addToPrefix(Component... components);
191
}
192
```
193

194
### SplitLayout
195

196
Resizable split pane layout for dividing space between two components.
197

198
```java { .api }
199
public class SplitLayout extends Component implements HasSize {
200
    public SplitLayout();
201
    public SplitLayout(Component primaryComponent, Component secondaryComponent);
202

203
    // Component management
204
    public void addToPrimary(Component component);
205
    public void addToSecondary(Component component);
206
    public void remove(Component component);
207
    public void removeFromPrimary();
208
    public void removeFromSecondary();
209

210
    // Split configuration
211
    public void setOrientation(Orientation orientation);
212
    public Orientation getOrientation();
213
    public void setSplitterPosition(double position);
214
    public double getSplitterPosition();
215
    public void setMinSplitterPosition(double position);
216
    public void setMaxSplitterPosition(double position);
217
}
218
```
219

220
## Application Layouts
221

222
### AppLayout
223

224
Application-level layout with navigation drawer, navbar, and content area.
225

226
```java { .api }
227
public class AppLayout extends Component implements RouterLayout, HasSize {
228
    public AppLayout();
229
    public AppLayout(Component navbar, Component drawer, Component content);
230

231
    // Navigation components
232
    public void addToNavbar(Component... components);
233
    public void addToNavbar(boolean touchOptimized, Component... components);
234
    public void addToDrawer(Component... components);
235
    public void setContent(Component content);
236
    public Component getContent();
237

238
    // Drawer configuration
239
    public void setDrawerOpened(boolean drawerOpened);
240
    public boolean isDrawerOpened();
241
    public void toggle();
242

243
    // Primary section
244
    public void setPrimarySection(Section section);
245
    public Section getPrimarySection();
246

247
    // RouterLayout implementation
248
    public void showRouterLayoutContent(HasElement content);
249

250
    public enum Section {
251
        NAVBAR, DRAWER
252
    }
253
}
254

255
public class DrawerToggle extends Button {
256
    public DrawerToggle();
257
    public DrawerToggle(String text);
258
}
259
```
260

261
## Content Organization
262

263
### Accordion
264

265
Collapsible content panels for organizing related information.
266

267
```java { .api }
268
public class Accordion extends Component implements HasSize {
269
    public Accordion();
270
    public Accordion(AccordionPanel... panels);
271

272
    // Panel management
273
    public AccordionPanel add(String summary, Component content);
274
    public AccordionPanel add(Component summary, Component content);
275
    public void add(AccordionPanel... panels);
276
    public void remove(AccordionPanel... panels);
277
    public void close();
278
    public AccordionPanel getOpenedPanel();
279

280
    // Event handling
281
    public Registration addOpenedChangeListener(ComponentEventListener<OpenedChangeEvent> listener);
282
}
283

284
public class AccordionPanel extends Component {
285
    public AccordionPanel();
286
    public AccordionPanel(String summaryText, Component content);
287
    public AccordionPanel(Component summary, Component content);
288

289
    public void setSummaryText(String summaryText);
290
    public String getSummaryText();
291
    public void setSummary(Component summary);
292
    public Component getSummary();
293
    public void setContent(Component content);
294
    public Component getContent();
295
    public void setOpened(boolean opened);
296
    public boolean isOpened();
297
}
298
```
299

300
### Tabs and TabSheet
301

302
Tab-based navigation for organizing content into separate views.
303

304
```java { .api }
305
public class Tabs extends Component implements HasSize {
306
    public Tabs();
307
    public Tabs(Tab... tabs);
308

309
    // Tab management
310
    public void add(Tab... tabs);
311
    public void remove(Tab... tabs);
312
    public void removeAll();
313
    public int getTabIndex(Tab tab);
314
    public Tab getTabAt(int index);
315
    public int getTabCount();
316

317
    // Selection
318
    public void setSelectedTab(Tab selectedTab);
319
    public Tab getSelectedTab();
320
    public void setSelectedIndex(int selectedIndex);
321
    public int getSelectedIndex();
322

323
    // Orientation
324
    public void setOrientation(Orientation orientation);
325
    public Orientation getOrientation();
326

327
    // Auto-selection
328
    public void setAutoselect(boolean autoselect);
329
    public boolean isAutoselect();
330

331
    // Event handling
332
    public Registration addSelectedChangeListener(ComponentEventListener<SelectedChangeEvent> listener);
333
}
334

335
public class Tab extends Component implements HasOrderedComponents<Tab>, HasText, HasEnabled {
336
    public Tab();
337
    public Tab(String label);
338
    public Tab(Component... components);
339

340
    public void add(Component... components);
341
    public void remove(Component... components);
342
    public void setText(String text);
343
    public String getText();
344
    public void setSelected(boolean selected);
345
    public boolean isSelected();
346
    public void setClosable(boolean closable);
347
    public boolean isClosable();
348
}
349

350
public class TabSheet extends Component implements HasSize {
351
    public TabSheet();
352

353
    // Tab and content management
354
    public Tab add(String label, Component content);
355
    public Tab add(Component content);
356
    public void add(Tab tab, Component content);
357
    public void remove(Tab tab);
358
    public void remove(Component content);
359
    public void removeAll();
360

361
    // Selection
362
    public void setSelectedTab(Tab selectedTab);
363
    public Tab getSelectedTab();
364
    public void setSelectedIndex(int selectedIndex);
365

366
    // Content access
367
    public Component getComponent(Tab tab);
368
    public Tab getTab(Component content);
369

370
    // Event handling
371
    public Registration addSelectedChangeListener(ComponentEventListener<SelectedChangeEvent> listener);
372
}
373
```
374

375
### Details
376

377
Expandable content section with summary header.
378

379
```java { .api }
380
public class Details extends Component implements HasOrderedComponents<Details>, HasSize {
381
    public Details();
382
    public Details(String summary, Component... content);
383
    public Details(Component summary, Component... content);
384

385
    // Content management
386
    public void add(Component... components);
387
    public void addContent(Component... components);
388
    public void remove(Component... components);
389
    public void removeAll();
390

391
    // Summary
392
    public void setSummaryText(String summary);
393
    public String getSummaryText();
394
    public void setSummary(Component summary);
395
    public Component getSummary();
396

397
    // State
398
    public void setOpened(boolean opened);
399
    public boolean isOpened();
400

401
    // Event handling
402
    public Registration addOpenedChangeListener(ComponentEventListener<OpenedChangeEvent> listener);
403
}
404
```
405

406
## Layout Utilities
407

408
### Scroller
409

410
Scrollable container with customizable scroll behavior.
411

412
```java { .api }
413
public class Scroller extends Component implements HasOrderedComponents<Scroller>, HasSize {
414
    public Scroller();
415
    public Scroller(Component... content);
416

417
    // Content management
418
    public void add(Component... components);
419
    public void remove(Component... components);
420
    public void removeAll();
421

422
    // Scroll configuration
423
    public void setScrollDirection(ScrollDirection scrollDirection);
424
    public ScrollDirection getScrollDirection();
425
}
426
```
427

428
### Card
429

430
Content card container with styling support.
431

432
```java { .api }
433
public class Card extends Component implements HasOrderedComponents<Card>, HasSize, HasTheme {
434
    public Card();
435
    public Card(Component... components);
436

437
    public void add(Component... components);
438
    public void remove(Component... components);
439
    public void addThemeVariants(CardVariant... variants);
440
}
441
```
442

443
## Layout Enums and Types
444

445
```java { .api }
446
// Flex alignment options
447
public enum Alignment {
448
    START, CENTER, END, STRETCH, BASELINE, AUTO
449
}
450

451
public enum JustifyContentMode {
452
    START, CENTER, END, BETWEEN, AROUND, EVENLY
453
}
454

455
public enum FlexDirection {
456
    ROW, COLUMN, ROW_REVERSE, COLUMN_REVERSE
457
}
458

459
public enum FlexWrap {
460
    NOWRAP, WRAP, WRAP_REVERSE
461
}
462

463
// Form layout options
464
public enum LabelsPosition {
465
    ASIDE, TOP
466
}
467

468
// Split layout options
469
public enum Orientation {
470
    HORIZONTAL, VERTICAL
471
}
472

473
// Scroll options
474
public enum ScrollDirection {
475
    VERTICAL, HORIZONTAL, BOTH, NONE
476
}
477

478
// Theme variants
479
public enum CardVariant implements ThemeVariant {
480
    LUMO_FILLED
481
}
482

483
// Component ordering interface
484
public interface HasOrderedComponents<T> {
485
    void add(Component... components);
486
    void addComponentAsFirst(Component component);
487
    void remove(Component... components);
488
    void removeAll();
489
    void replace(Component oldComponent, Component newComponent);
490
}
491
```
492

493
## Usage Examples
494

495
### Responsive Form Layout
496

497
```java
498
FormLayout formLayout = new FormLayout();
499
formLayout.setResponsiveSteps(
500
    new FormLayout.ResponsiveStep("0", 1),
501
    new FormLayout.ResponsiveStep("320px", 2),
502
    new FormLayout.ResponsiveStep("500px", 3)
503
);
504

505
TextField firstName = new TextField("First name");
506
TextField lastName = new TextField("Last name");
507
EmailField email = new EmailField("Email");
508

509
formLayout.add(firstName, lastName);
510
formLayout.add(email, 2); // Spans 2 columns
511
```
512

513
### Application Layout with Navigation
514

515
```java
516
AppLayout appLayout = new AppLayout();
517

518
// Add navigation drawer
519
VerticalLayout drawer = new VerticalLayout();
520
drawer.add(new RouterLink("Home", HomeView.class));
521
drawer.add(new RouterLink("Users", UsersView.class));
522
appLayout.addToDrawer(drawer);
523

524
// Add navbar with drawer toggle
525
appLayout.addToNavbar(new DrawerToggle(), new H1("My App"));
526
```
527

528
The layout system provides comprehensive tools for creating responsive, professional web application interfaces with minimal CSS knowledge required.