flexLayout

flexLayout arranges child components using the CSS Flexbox model.

XML Element	`flexLayout`
Java Class	`FlexLayout`

XML Element

flexLayout

Java Class

FlexLayout

Basics

The example shows how flexDirection, alignItems, justifyContent, and flexWrap control the arrangement of child components. flexLayout has no predefined width or height.

<flexLayout alignItems="CENTER" flexDirection="ROW"
            justifyContent="CENTER" flexWrap="WRAP"
            classNames="flex-with-gap">
    <span text="Span"/>
    <textField placeholder="TextField"/>
    <button text="Button"/>
    <button text="Button"/>
</flexLayout>

Content Alignment

The contentAlignment attribute maps to the CSS align-content property. It controls how lines within a flex container are aligned along the cross axis when there is extra space. It works similarly to how justify-content aligns individual items along the main axis.

This property only affects multi-line flex containers, where flex-wrap is set to either wrap or wrap-reverse. It does not affect a single-line container with the default flex-wrap: nowrap value.

START

Lines are positioned at the beginning of the container.

XML code

<flexLayout contentAlignment="START"
            css="gap: 0.5em; border: 1px solid #ccc;"
            width="20em"
            minHeight="10em"
            flexWrap="WRAP">
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
</flexLayout>

CENTER

Lines are positioned at the center of the container.

XML code

<flexLayout contentAlignment="CENTER"
            css="gap: 0.5em; border: 1px solid #ccc;"
            width="20em"
            minHeight="10em"
            flexWrap="WRAP">
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
</flexLayout>

END

Lines are positioned at the end of the container.

XML code

<flexLayout contentAlignment="END"
            css="gap: 0.5em; border: 1px solid #ccc;"
            width="20em"
            minHeight="10em"
            flexWrap="WRAP">
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
</flexLayout>

STRETCH

Lines are stretched to fill the available cross-axis space.

XML code

<flexLayout contentAlignment="STRETCH"
            css="gap: 0.5em; border: 1px solid #ccc;"
            width="20em" minHeight="10em"
            flexWrap="WRAP">
    <button text="Button" width="9em" height="AUTO"/>
    <button text="Button" width="9em" height="AUTO"/>
    <button text="Button" width="9em" height="AUTO"/>
</flexLayout>

SPACE_BETWEEN

Lines are distributed evenly. The first line is flush with the start and the last is flush with the end.

XML code

<flexLayout contentAlignment="SPACE_BETWEEN"
            css="gap: 0.5em; border: 1px solid #ccc;"
            width="20em" minHeight="10em"
            flexWrap="WRAP">
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
</flexLayout>

SPACE_AROUND

Lines are distributed evenly, with half-size spaces at the start and end.

XML code

<flexLayout contentAlignment="SPACE_AROUND"
            css="gap: 0.5em; border: 1px solid #ccc;"
            width="20em" minHeight="10em"
            flexWrap="WRAP">
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
</flexLayout>

Expand

Set expand to a child component ID to give that component a flex-grow value of 1, allowing it to take up remaining space along the main axis.

<flexLayout id="flexLayout"
            flexDirection="COLUMN"
            expand="button"
            height="100%"
            width="100%">
    <button text="Button"/>
    <button id="button" text="Button"/>
    <button text="Button"/>
</flexLayout>

Flex Direction

The flexDirection attribute maps to the CSS flex-direction property. This property determines the direction flex items are placed within the flex container, which defines the main axis and the direction (normal or reversed).

ROW

The items are displayed horizontally, as a row.

XML code

<flexLayout flexDirection="ROW"
            css="gap: 0.5em">
    <button text="Button 1"/>
    <button text="Button 2"/>
    <button text="Button 3"/>
</flexLayout>

ROW_REVERSE

The items are displayed horizontally, as a row in reverse order.

XML code

<flexLayout flexDirection="ROW_REVERSE"
            css="gap: 0.5em">
    <button text="Button 1"/>
    <button text="Button 2"/>
    <button text="Button 3"/>
</flexLayout>

COLUMN

The items are displayed vertically, as a column.

XML code

<flexLayout flexDirection="COLUMN">
    <button text="Button 1"/>
    <button text="Button 2"/>
    <button text="Button 3"/>
</flexLayout>

COLUMN_REVERSE

The items are displayed vertically, as a column in reverse order.

XML code

<flexLayout flexDirection="COLUMN_REVERSE">
    <button text="Button 1"/>
    <button text="Button 2"/>
    <button text="Button 3"/>
</flexLayout>

Flex Wrap

The flexWrap attribute maps to the CSS flex-wrap property. It determines whether flex items are forced onto a single line or can wrap onto multiple lines. If wrapping is allowed, it also sets the direction in which the lines are stacked.

NOWRAP

The flex items are laid out in a single line which may cause the flex container to overflow.

XML code

<flexLayout flexWrap="NOWRAP"
            css="gap: 0.5em; border: 1px solid #ccc;"
            width="20em">
    <button text="Button 1" width="9em"/>
    <button text="Button 2" width="9em"/>
    <button text="Button 3" width="9em"/>
</flexLayout>

WRAP

The flex items break into multiple lines.

XML code

<flexLayout flexWrap="WRAP"
            css="gap: 0.5em; border: 1px solid #ccc;"
            width="20em">
    <button text="Button 1" width="9em"/>
    <button text="Button 2" width="9em"/>
    <button text="Button 3" width="9em"/>
</flexLayout>

WRAP_REVERSE

The flex items break into multiple lines in reverse order.

XML code

<flexLayout flexWrap="WRAP_REVERSE"
            css="gap: 0.5em; border: 1px solid #ccc;"
            width="20em">
    <button text="Button 1" width="9em"/>
    <button text="Button 2" width="9em"/>
    <button text="Button 3" width="9em"/>
</flexLayout>

Justify Content

The justifyContent attribute maps to the CSS justify-content property. This property controls how space is distributed between and around content items along the main axis of a flex container.

Value Description

Value	Description
`START` (default)	Items are positioned at the beginning of the container.
`CENTER`	Items are positioned at the center of the container.
`END`	Items are positioned at the end of the container.
`BETWEEN`	Items are positioned with space between them; the first item is at the start and the last item is at the end.
`AROUND`	Items are evenly positioned in the line with equal space around them. Note that start and end gaps are half the size of the space between each item.
`EVENLY`	Items are positioned so that the spacing between any two items (and the space to the edges) is equal.

START (default)

Items are positioned at the beginning of the container.

CENTER

Items are positioned at the center of the container.

END

Items are positioned at the end of the container.

BETWEEN

Items are positioned with space between them; the first item is at the start and the last item is at the end.

AROUND

Items are evenly positioned in the line with equal space around them. Note that start and end gaps are half the size of the space between each item.

EVENLY

Items are positioned so that the spacing between any two items (and the space to the edges) is equal.

For usage examples, see Layout Rules.

Attributes

Common attributes serve the same purpose for all components. The following attributes are specific to flexLayout.

Name Description Default

Name	Description	Default
contentAlignment	Sets the alignment of the flex container’s lines. See Content Alignment.	`STRETCH`
expand	Specifies the ID of the child component that expands to take up remaining space. See Expand.	—
flexDirection	Sets the flex direction property of the layout. See Flex Direction.	`ROW`
flexWrap	Sets the flex wrap property of the layout. See Flex Wrap.	`NOWRAP`
justifyContent	Sets the justify content mode used by this layout. See Justify Content.	`START`

contentAlignment

Sets the alignment of the flex container’s lines. See Content Alignment.

STRETCH

expand

Specifies the ID of the child component that expands to take up remaining space. See Expand.

—

flexDirection

Sets the flex direction property of the layout. See Flex Direction.

ROW

flexWrap

Sets the flex wrap property of the layout. See Flex Wrap.

NOWRAP

justifyContent

Sets the justify content mode used by this layout. See Justify Content.

START

Handlers

Common handlers are configured in the same way for all components. The following handlers are specific to flexLayout:

Name Description

Name	Description
clickListener	Fires the `com.vaadin.flow.component.ClickEvent` with the `click` subject. It is triggered whenever the layout is clicked. To register the event handler programmatically, use the `addClickListener()` component method.
doubleClickListener	Fires the `com.vaadin.flow.component.ClickEvent` with the `doubleClick` subject. It is triggered when the user clicks the layout twice within a short time interval. To register the event handler programmatically, use the `addDoubleClickListener()` component method.
singleClickListener	Fires the `com.vaadin.flow.component.ClickEvent` with the `singleClick` subject. The event is triggered after a timeout to ensure it is not a double-click. To register the event handler programmatically, use the `addSingleClickListener()` component method.

clickListener

Fires the com.vaadin.flow.component.ClickEvent with the click subject. It is triggered whenever the layout is clicked. To register the event handler programmatically, use the addClickListener() component method.

doubleClickListener

Fires the com.vaadin.flow.component.ClickEvent with the doubleClick subject. It is triggered when the user clicks the layout twice within a short time interval. To register the event handler programmatically, use the addDoubleClickListener() component method.

singleClickListener

Fires the com.vaadin.flow.component.ClickEvent with the singleClick subject. The event is triggered after a timeout to ensure it is not a double-click. To register the event handler programmatically, use the addSingleClickListener() component method.

Elements

A flexLayout can contain components and layouts arranged according to its flex properties.

Was this page helpful?

Thank you for your feedback

Something went wrong