FlexLayout
webforJ provides developers with an efficient and intuitive way to layout their various applications and components - the Flex Layout. This toolset allows for items to be displayed either vertically or horizontally.
Flex layout properties
Flex layout's 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 flex layout, or the parent element, is a box/container that can contain one or more components. Everything inside a Flex Layout is called an item or child element. The Flex Layout provides some robust alignment capabilities, which can be achieved with the help of either container or item properties.
webforJ's layout component follows the pattern of CSS's flexbox layout. However, these tools are made to be utilized fully in Java, and do not require the application 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 will not affect the orientation or placement of the parent - only the child components within.
Direction
The Flex Layout will add components next to one another according to the direction chosen by the developer - either horizontal or vertical. When using he builder, utilize either the horizontal(), horizontalReverse(), vertical() or verticalReverse() methods when calling the create() method on a FlexLayout object to configure this layout as the object is created.
Alternatively, use the setDirection() method. The horizontal options are either FlexDirection.ROW (left to right) or FlexDirection.ROW_REVERSE (right to left), and the vertical options are either FlexDirection.COLUMN (top to bottom) or FlexDirection.COLUMN_REVERSE (bottom to top). This is done with the FlexLayout object, as opposed to the builder.
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 Flex Layout Builder to configure the positioning when creating a new Flex Layout.
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 components how items will display along the cross axis as a whole within the container, and is effective for single-line layouts.
The setAlignContent() methods components 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 Flex Layout component, you can specify the behavior of the flex layout when components that are added no longer fit within the display. To configure this using the builder, utilize the utilize the - nowrap() (default), wrap() and wrapReverse() methods to configure wrapping.
Alternatively, if your layout already exists, use the setWrap() method to dictate how components will behave once they are no longer able to fit on a single line.
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 - this property will only take effect if it is 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 Flex Layout 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 as a tool 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 will not affect any child elements within the Flex Layout, but rather the actual Layout itself. This is useful for styling a single Flex Layout element that is a child of a larger Flex Layout element independent of styles applying to all children.
Order
The ItemOrder property determines how components are displayed within the Flex Layout, and when used on a Flex Layout will assign an item that layout's specific order number. This overrides the default "source order" that is 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
Flex Layout's self-alignment refers to how a single Flex Layout 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 Flex Layout object. This allows you to align individual Flex Layout 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 Flex Layout'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 / shrink
Item Grow and Item Shrink are two properties that work in conjunction with each other and with the Item Basis property to determine how flex items grow or shrink to fill the available space within a Flex Layout 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 a 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 a 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 a 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 does not have enough space to accommodate its contents, flex items with a 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
Show Code
- Java
- CSS
Using the ColumnsLayout class, you can achieve a similar layout.