By default, Flow Layout aligns components at the top, centered horizontally within the container. You can control the horizontal alignment by explicitly setting the horizontalAlignment attribute of a flowLayout element. The vertical alignment cannot be changed.

In addition to left, center, or right, there are two special values for horizontal alignment and positioning of content according to the default direction of text flow in a locale-independent way.

To match the alignment of content with the default direction of text flow regardless of locale, specify the horizontal alignment as either leading or trailing. In a locale where text normally flows from left to right, leading is equivalent to left, and trailing is equivalent to right, but their meanings are reversed in a locale where text normally flows from right to left.

The following example illustrates how to set the horizontalAlignment attribute for a flowLayout element.

Make this object in eNode Sandbox. The result should be similar to the following:

Flow layout always sizes components according to their preferred size before laying them out. The preferred size for a component is calculated automatically by the component itself, but may also be set explicitly through the component’s preferredSize attribute, by mentioning the width followed by height.

The following example explicitly sets the preferred size of each label inside the panel.

Make this object in eNode Sandbox. The result should be similar to the following:

Note that a flowLayout element’s horizontalAlignment attribute controls the alignment of the entire collection of components taken together, whereas a label element’s horizontalAlignment attribute controls the alignment of text within that label alone.

By default, Flow Layout also leaves a five-pixel gap around components as it lays them out. You can control this gap by explicitly setting either the horizontal gap, or the vertical gap, or both, as shown in the following example.

Make this object in eNode Sandbox. The result should be similar to the following: