HorizontalLayout
Description
<vaadin-horizontal-layout> provides a simple way to horizontally align your HTML elements.
<vaadin-horizontal-layout>
<div>Item 1</div>
<div>Item 2</div>
</vaadin-horizontal-layout>Built-in Theme Variations
<vaadin-horizontal-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 |
Component's slots
The following slots are available to be set:
| Slot name | Description |
|---|---|
| no name | Default slot |
middle |
Slot for the content placed in the middle |
end |
Slot for the content placed at the end |
Custom CSS Properties
The following custom CSS properties are available for styling:
| Custom CSS property | Description |
|---|---|
--vaadin-horizontal-layout-margin |
The default CSS margin applied when using theme="margin" |
--vaadin-horizontal-layout-padding |
The default CSS padding applied when using theme="padding" |
--vaadin-horizontal-layout-gap |
The default CSS gap applied when using theme="spacing" |
See Styling Components documentation.