<vaadin-vertical-layout>
`<vaadin-vertical-layout>` provides a simple way to vertically align your HTML elements.
- Category
- Layout
- Built with
Lit- Library
Vaadin
- Author
Vaadin
- Package
-
@vaadin/vertical-layout - Component size
- 0.8 kB JS (minified + gzipped, JS includes dependencies beyond the library)
- Library size
- 19.9 kB JS (shared by every Vaadin component, loaded once per page)
- Popular
- 3 out of 5
- Downloads
- 59,930/week · jsDelivr 2,255 hits/month (whole @vaadin/vertical-layout package)
- Latest stable version
25.3.2- Last published
- Component last changed
- (in
25.3.0) - License
- Apache-2.0
<vaadin-vertical-layout> provides a simple way to vertically align your HTML elements.
<vaadin-vertical-layout>
<div>Item 1</div>
<div>Item 2</div>
</vaadin-vertical-layout>
Built-in Theme Variations
<vaadin-vertical-layout> supports the following theme variations:
| Theme variation | Description |
|---|---|
theme="margin" |
Applies the default amount of CSS margin for the host element |
theme="padding" |
Applies the default amount of CSS padding for the host element |
theme="spacing" |
Applies the default amount of CSS margin between items |
theme="wrap" |
Items wrap to the next row when they exceed the layout width |
Custom CSS Properties
The following custom CSS properties are available for styling:
| Custom CSS property | Description |
|---|---|
--vaadin-vertical-layout-margin |
The default CSS margin applied when using theme="margin" |
--vaadin-vertical-layout-padding |
The default CSS padding applied when using theme="padding" |
--vaadin-vertical-layout-gap |
The default CSS gap applied when using theme="spacing" |
See Styling Components documentation.
Attributes
theme