Package com.vaadin.flow.component.orderedlayout

Class FlexLayout

java.lang.Object

com.vaadin.flow.component.Component

com.vaadin.flow.component.orderedlayout.FlexLayout

All Implemented Interfaces:

AttachNotifier, ClickNotifier<FlexLayout>, DetachNotifier, HasComponents, HasElement, HasEnabled, HasOrderedComponents, HasSize, HasStyle, FlexComponent, Serializable

@Tag("div")
public class FlexLayout
extends Component
implements FlexComponent, ClickNotifier<FlexLayout>

A layout component that implements Flexbox. It uses the default flex-direction and doesn't have any predetermined width or height.

This component can be used as a base class for more advanced layouts.

See Also:

• Using CSS Flexible boxes on MDN
• Serialized Form

Nested Class Summary

Nested Classes

Modifier and Type	Class	Description
static enum	FlexLayout.ContentAlignment	Enum with the possible values for the component alignment inside the layout.
static enum	FlexLayout.FlexDirection	Possible values for the flex-direction CSS property, which determines how the elements are placed inside the layout.
static enum	FlexLayout.FlexWrap	Possible values for the flex-wrap CSS property, which determines how the elements inside the layout should behave when they don't fit inside the layout.

Nested classes/interfaces inherited from interface com.vaadin.flow.component.orderedlayout.FlexComponent

FlexComponent.Alignment, FlexComponent.JustifyContentMode

Constructor Summary

Constructors

Constructor	Description
FlexLayout()	Default constructor.
FlexLayout(Component... children)	Convenience constructor to create a layout with the children already inside it.

Method Summary

Modifier and Type	Method	Description
FlexLayout.ContentAlignment	getAlignContent()	Gets the current align content property of the layout.
String	getFlexBasis(HasElement component)	Gets the flex basis property of a given component.
FlexLayout.FlexDirection	getFlexDirection()	Gets the flex direction property of the layout.
FlexLayout.FlexWrap	getFlexWrap()	Gets the current flex wrap of the layout.
int	getOrder(HasElement component)	Gets the order property of a given component.
void	setAlignContent(FlexLayout.ContentAlignment alignment)	Similar to FlexComponent.setAlignItems(Alignment), but instead of aligning components, it aligns flex lines.
void	setFlexBasis(String width, HasElement... components)	Sets the flex basis property of the components inside the layout.
void	setFlexDirection(FlexLayout.FlexDirection flexDirection)	Sets the flex direction property of the layout.
void	setFlexWrap(FlexLayout.FlexWrap flexWrap)	Gets the FlexLayout.FlexWrap used by this layout.
void	setOrder(int order, HasElement component)	Sets the order property of the component inside the layout.

Methods inherited from class com.vaadin.flow.component.Component

addListener, findAncestor, fireEvent, from, get, getChildren, getElement, getEventBus, getId, getListeners, getLocale, getParent, getTranslation, getTranslation, getTranslation, getTranslation, getTranslation, getTranslation, getUI, hasListener, isAttached, isTemplateMapped, isVisible, onAttach, onDetach, onEnabledStateChanged, removeFromParent, scrollIntoView, scrollIntoView, set, setElement, setId, setVisible

Methods inherited from class java.lang.Object

clone, equals, finalize, getClass, hashCode, notify, notifyAll, toString, wait, wait, wait

Methods inherited from interface com.vaadin.flow.component.AttachNotifier

addAttachListener

Methods inherited from interface com.vaadin.flow.component.ClickNotifier

addClickListener, addClickShortcut, addDoubleClickListener, addSingleClickListener

Methods inherited from interface com.vaadin.flow.component.DetachNotifier

addDetachListener

Methods inherited from interface com.vaadin.flow.component.orderedlayout.FlexComponent

expand, getAlignItems, getAlignSelf, getFlexGrow, getFlexShrink, getJustifyContentMode, replace, setAlignItems, setAlignSelf, setFlexGrow, setFlexShrink, setJustifyContentMode

Methods inherited from interface com.vaadin.flow.component.HasComponents

add, add, add, addComponentAsFirst, addComponentAtIndex, remove, remove, removeAll

Methods inherited from interface com.vaadin.flow.component.HasElement

getElement

Methods inherited from interface com.vaadin.flow.component.HasEnabled

isEnabled, setEnabled

Methods inherited from interface com.vaadin.flow.component.HasOrderedComponents

getChildren, getComponentAt, getComponentCount, indexOf

Methods inherited from interface com.vaadin.flow.component.HasSize

getHeight, getHeightUnit, getMaxHeight, getMaxWidth, getMinHeight, getMinWidth, getWidth, getWidthUnit, setHeight, setHeight, setHeightFull, setMaxHeight, setMaxHeight, setMaxWidth, setMaxWidth, setMinHeight, setMinHeight, setMinWidth, setMinWidth, setSizeFull, setSizeUndefined, setWidth, setWidth, setWidthFull

Methods inherited from interface com.vaadin.flow.component.HasStyle

addClassName, addClassNames, getClassName, getClassNames, getStyle, hasClassName, removeClassName, removeClassNames, setClassName, setClassName

Constructor Details

FlexLayout

public FlexLayout()

Default constructor. Creates an empty layout.

FlexLayout

public FlexLayout(Component... children)

Convenience constructor to create a layout with the children already inside it.

Parameters:

children - the items to add to this layout

See Also:

• HasComponents.add(Component...)

Method Details

setFlexWrap

public void setFlexWrap(FlexLayout.FlexWrap flexWrap)

Gets the FlexLayout.FlexWrap used by this layout.

The default flex wrap is FlexLayout.FlexWrap.NOWRAP.

Parameters:

flexWrap - the flex wrap of the layout, never null

getFlexWrap

public FlexLayout.FlexWrap getFlexWrap()

Gets the current flex wrap of the layout.

The default flex wrap is FlexLayout.FlexWrap.NOWRAP.

Returns:

the flex wrap used by the layout, never null

setAlignContent

public void setAlignContent(FlexLayout.ContentAlignment alignment)

Similar to FlexComponent.setAlignItems(Alignment), but instead of aligning components, it aligns flex lines.

It effectively sets the "alignContent" style value.

The default alignment is FlexLayout.ContentAlignment.STRETCH.

Parameters:

alignment - the alignment to apply to the components. Setting null will reset the alignment to its default

getAlignContent

public FlexLayout.ContentAlignment getAlignContent()

Gets the current align content property of the layout.

Returns:

the align content property, or FlexLayout.ContentAlignment.STRETCH if none was set

setFlexBasis

public void setFlexBasis(String width,
 HasElement... components)

Sets the flex basis property of the components inside the layout. The flex basis property specifies the initial main size of a component.

Parameters:

width - the width for the components. Setting null will remove the flex basis property

components - the components to apply the flex basis property

getFlexBasis

public String getFlexBasis(HasElement component)

Gets the flex basis property of a given component.

Parameters:

component - the component to read the flex basis property from

Returns:

the flex grow property

setFlexDirection

public void setFlexDirection(FlexLayout.FlexDirection flexDirection)

Sets the flex direction property of the layout. The flex direction property specifies how components are placed in the layout defining the main axis and the direction (normal or reversed). The default direction is FlexLayout.FlexDirection.ROW.

Parameters:

flexDirection - the direction for the components. Setting null will remove the flex direction property

getFlexDirection

public FlexLayout.FlexDirection getFlexDirection()

Gets the flex direction property of the layout.

Returns:

the flex direction property, or FlexLayout.FlexDirection.ROW if none was set

setOrder

public void setOrder(int order,
 HasElement component)

Sets the order property of the component inside the layout. The order property specifies the order of a component relative to the rest of the components inside the same layout. The default value is 0, and setting 0 can be used to remove an existing order for a component.

Parameters:

order - the order for the component

component - the component to apply the order property

getOrder

public int getOrder(HasElement component)

Gets the order property of a given component.

Parameters:

component - the component to read the order property from

Returns:

the order property, or 0 if none was set