Package com.oorian.html.layout

Class FlowLayout

java.lang.Object
com.oorian.html.Element<FlowLayout>
com.oorian.html.VisualElement<FlowLayout>
com.oorian.html.StyledElement<FlowLayout>
com.oorian.html.layout.FlowLayout
public class FlowLayout extends StyledElement<FlowLayout>
A wrapping flow container that arranges items left-to-right, wrapping to the next line when space runs out.

FlowLayout uses CSS Flexbox with flex-wrap: wrap to create a responsive layout where items naturally flow and wrap based on available space.

Use Cases:

  • Tag/chip lists
  • Button groups that wrap on small screens
  • Image thumbnails/galleries
  • Badge collections
  • Any collection of variable-width items

Usage:


 // Tag list with uniform gap
 FlowLayout tags = new FlowLayout(8);
 tags.addElement(tag1);
 tags.addElement(tag2);
 tags.addElement(tag3);

 // Button group with different row/column gaps
 FlowLayout buttons = new FlowLayout(12, 8);
 buttons.setAlign(AlignItems.CENTER);
 buttons.addElement(btn1);
 buttons.addElement(btn2);
Since:
2025
Version:
1.0
Author:
Marvin P. Warble Jr.
See Also:

  • Constructor Details

    • FlowLayout

      public FlowLayout()
      Constructs an empty FlowLayout with wrapping enabled.

    • FlowLayout

      public FlowLayout(int gap)
      Constructs a FlowLayout with the specified uniform gap.
      Parameters:
      gap - the gap in pixels between items (both row and column)

    • FlowLayout

      public FlowLayout(int rowGap, int columnGap)
      Constructs a FlowLayout with separate row and column gaps.
      Parameters:
      rowGap - the vertical gap between rows in pixels
      columnGap - the horizontal gap between items in pixels

  • Method Details

    • setGap

      public final FlowLayout setGap(int gap)
      Sets a uniform gap between items.
      Overrides:
      setGap in class StyledElement<FlowLayout>
      Parameters:
      gap - the gap in pixels
      Returns:
      this FlowLayout for method chaining

    • setGap

      public final FlowLayout setGap(String gap)
      Sets a uniform gap between items using a CSS value.
      Overrides:
      setGap in class StyledElement<FlowLayout>
      Parameters:
      gap - the gap value (e.g., "1rem", "16px")
      Returns:
      this FlowLayout for method chaining

    • setGap

      public final FlowLayout setGap(int rowGap, int columnGap)
      Sets separate row and column gaps.
      Overrides:
      setGap in class StyledElement<FlowLayout>
      Parameters:
      rowGap - the vertical gap between rows in pixels
      columnGap - the horizontal gap between items in pixels
      Returns:
      this FlowLayout for method chaining

    • setAlign

      public final FlowLayout setAlign(AlignItems align)
      Sets the cross-axis alignment for items within each row.
      Parameters:
      align - the alignment value
      Returns:
      this FlowLayout for method chaining

    • setJustify

      public final FlowLayout setJustify(JustifyContent justify)
      Sets the main-axis alignment for items.
      Parameters:
      justify - the justification value
      Returns:
      this FlowLayout for method chaining

    • centerItems

      public final FlowLayout centerItems()
      Centers items within each row.
      Returns:
      this FlowLayout for method chaining

    • spaceBetween

      public final FlowLayout spaceBetween()
      Distributes items with space between them.
      Returns:
      this FlowLayout for method chaining

    • spaceAround

      public final FlowLayout spaceAround()
      Distributes items with space around them.
      Returns:
      this FlowLayout for method chaining

    • spaceEvenly

      public final FlowLayout spaceEvenly()
      Distributes items with equal space between them including edges.
      Returns:
      this FlowLayout for method chaining