FlexLayout
The FlexLayout component arranges child components in a row or column using the CSS Flexbox model. It gives you control over alignment, spacing, wrapping, and how items grow or shrink to fill available space.
FlexLayout properties
FlexLayout properties can be grouped into two categories: properties that apply to the items within a layout, and properties that apply to the layout itself. The FlexLayout, or the parent element, is a box/container that can contain one or more components. Everything inside a FlexLayout is called an item or child element. The FlexLayout provides some alignment capabilities, which can be achieved with the help of either container or item properties.
The FlexLayout component follows the pattern of CSS's flexbox layout. However, FlexLayout is made to be used fully in Java, and doesn't require the use of CSS outside of the Java API methods provided.
Container properties
Container properties will apply to all of the components within a component and not the layout itself. They won't affect the orientation or placement of the parent, only the child components within.
Direction
The FlexLayout adds components next to one another according to its direction, either horizontal or vertical. When using the builder, chain the horizontal(), horizontalReverse(), vertical(), or verticalReverse() methods with the FlexLayout.create() method to configure the layout as the object is created.
To set the direction on an existing FlexLayout object, use the setDirection() method. The horizontal options are FlexDirection.ROW (left to right) or FlexDirection.ROW_REVERSE (right to left), and the vertical options are FlexDirection.COLUMN (top to bottom) or FlexDirection.COLUMN_REVERSE (bottom to top).
Show Code
- Java
- CSS
Positioning
Components that are added horizontally can also be positioned both horizontally and vertically. Use the justify(), align() and contentAlign() methods from the FlexLayout Builder to configure the positioning when creating a new FlexLayout.
Alternatively, on the actual FlexLayout object you can use the setJustifyContent() method to position items horizontally, and the setAlignment() method to configure vertical positioning. To modify the area around components along the cross axis (y-axis for horizontal layouts), use the setAlignContent() method.
The setAlignment() method controls how items will display along the cross axis as a whole within the container, and is effective for single-line layouts.
The setAlignContent() method controls the space around the cross axis, and will take effect only when a layout has multiple lines.
Show Code
- Java
- CSS
Wrapping
To further customize the FlexLayout component, you can specify its behavior when components are added that no longer fit within the display. To configure this using the builder, use the nowrap() (default), wrap(), and wrapReverse() methods to configure wrapping. To configure this on an existing FlexLayout object, use the setWrap() method.
Spacing
In order to apply minimum spacing between items, you can set the gap property. It applies that spacing only between items, not on the outer edges.
The gap property's behavior can be thought of as a minimum distance between, so it will only take effect if it's the largest calculated
space between items. If the space between items would otherwise be larger due to another calculated property, such as due to setAlignContent(FlexContentAlignment.SPACE_BETWEEN), then the gap property will be ignored.
Flow
Flex flow, which is a combination of both the direction and the wrap properties, can be set using the setFlow() method on a FlexLayout object.
To configure this property when creating the layout, use the proper directional and wrap methods. For example, to create a column wrap flow,
use the .vertical().wrap() combination.
Container builder
The following demo allows you to build a container with the desired flex properties selected from the various menus. This tool can be used not only to create a visual example of the various methods, but also to create your own layouts with your desired properties. To use a layout you customize, simply copy the output code and add your desired elements for use in your program.
Show Code
- Java
- CSS
Item properties
Item properties won't affect any child elements within the FlexLayout, but affect the actual layout itself. This is useful for styling a single FlexLayout element that's a child of a larger FlexLayout element independent of styles applying to all children.
Order
The ItemOrder property determines the order that components are displayed within the FlexLayout, and when used on a FlexLayout will assign an item that layout's specific order number. This overrides the default "source order" built into each item (the order in which a component is added to its parent), and means that it will be shown before items with a higher order, and after items with a lower order.
This property accepts a unitless integer value that specifies the relative order of the flex item within the container. The lower the value, the earlier the item appears in the order. For example, an item with an order value of 1 will appear before an item with an order value of 2.
It's important to note that the order property only affects the visual order of the items within the container, not their actual position in the DOM. This means that screen readers and other assistive technologies will still read the items in the order they appear in the source code, not in the visual order.
Show Code
- Java
- CSS
Self alignment
FlexLayout's self-alignment refers to how a single FlexLayout object is aligned within its parent flex container along the cross axis, which is perpendicular to the main axis. The cross axis alignment is controlled by the Alignment property.
The align-self property specifies the alignment of a single flex item along the cross axis, overriding the default alignment set by the AlignContent property in a FlexLayout object. This allows you to align individual FlexLayout objects differently from the others in the container.
Self alignment uses the same values as content alignment.
This property is especially useful when you need to align a specific item differently from the other items in the container. See the sample below for an example of aligning a single item:
Show Code
- Java
- CSS
Flex basis
Item Basis is a property that's used in conjunction with FlexLayout's direction to set the initial size of a flex item before any remaining space is distributed.
The Item Basis property specifies the default size of a flex item along the main axis, which is either horizontal (for a Row direction) or vertical (for a Column direction). This property sets the width or height of a flex item depending on the value of the flex-direction property.
By default, the Item Basis property is set to auto, which means that the size of the item is determined by its content. However, you can also set a specific size for the item using various units such as pixels (px), ems (em), percentages (%), or any other CSS length unit.
The following demo allows you to select one or more boxes and change the Item Basis for the selected items.
Show Code
- Java
Flex grow and shrink
Item Grow and Item Shrink are two properties that work in conjunction with each other and the Item Basis property to determine how flex items grow or shrink to fill the available space within a FlexLayout object.
The Item Grow property specifies how much the flex item can grow relative to the other items in the container. It takes a unitless value that represents a proportion of the available space that should be allocated to the item. For example, if one item has an Item Grow value of 1 and another has a value of 2, the second item will grow twice as much as the first item.
The Item Shrink property, on the other hand, specifies how much the flex item can shrink relative to the other items in the container. It also takes a unitless value that represents a proportion of the available space that should be allocated to the item. For example, if one item has an Item Shrink value of 1 and another has a value of 2, the second item will shrink twice as much as the first item.
When a container has more space than is needed to accommodate its contents, flex items with an Item Grow value greater than 0 will expand to fill the available space. The amount of space each item gets is determined by the ratio of its Item Grow value to the total Item Grow value of all items in the container.
Similarly, when a container doesn't have enough space to accommodate its contents, flex items with an Item Shrink value greater than 0 will shrink to fit the available space. The amount of space each item gives up is determined by the ratio of its Item Shrink value to the total Item Shrink value of all items in the container.
Example form
The form below demonstrates how FlexLayout organizes input fields into a structured layout.
If you prefer a column-based structure, look at the ColumnsLayout version of this form in the ColumnsLayout article to see how it compares.
Show Code
- Java
- CSS