Basics

Guides

API Reference

Menu

Basics

Guides

API Reference

class: FlowPane

[102:7] extends: Pane

The FlowPane class wraps the JavaFX FlowPane layout container, which arranges child nodes in a flow that wraps at the pane boundary, similar to how text wraps in a paragraph. The flow direction can be horizontal (rows wrap downward) or vertical (columns wrap rightward), and you can control the gap between children as well as their alignment within each row or column. FlowPane resizes its children to their preferred sizes and reflows them automatically when the pane is resized.

CSS Properties -- FlowPane

Property Values Default Description
-fx-hgap <size> 0 Horizontal gap between child nodes.
-fx-vgap <size> 0 Vertical gap between child nodes.
-fx-alignment top-left | top-center | top-right | center-left | center | center-right | bottom-left | bottom-center | bottom-right | baseline-left | baseline-center | baseline-right top-left Overall alignment of the content within the FlowPane.
-fx-column-halignment left | center | right left Horizontal alignment of nodes within a column (vertical flow).
-fx-row-valignment top | center | baseline | bottom center Vertical alignment of nodes within a row (horizontal flow).
-fx-orientation horizontal | vertical horizontal Direction of the primary flow axis.

CSS Properties -- Region

Background fills

Property Values Default Description
-fx-background-color <paint> [, <paint>]* transparent One or more paint values for background fill layers, rendered back to front.
-fx-background-insets <size> or <t> <r> <b> <l> [, ...]* 0 0 0 0 Insets from the region edges for each background fill layer.
-fx-background-radius <size> [/ <size>]* [, ...]* 0 0 0 0 Corner radii for each background fill layer.

Background images

Property Values Default Description
-fx-background-image <uri> [, <uri>]* null One or more image URIs for background image layers.
-fx-background-position <bg-position> [, ...]* 0% 0% Position of each background image within the region. Accepts keywords or size values.
-fx-background-repeat <repeat-style> [, ...]* repeat repeat Tiling behavior for each background image. Values: repeat, no-repeat, round, space applied per axis.
-fx-background-size <bg-size> [, ...]* auto auto Dimensions for each background image. Supports cover, contain, stretch, or explicit sizes.

Stroked borders

Property Values Default Description
-fx-border-color <paint> or <t> <r> <b> <l> [, ...]* null Paint colors for the border stroke layers.
-fx-border-insets <size> or <t> <r> <b> <l> [, ...]* null Insets from region edges for each border layer.
-fx-border-radius <size> [, ...]* null Corner radii for border stroke layers.
-fx-border-style <border-style> [, ...]* null Border line style (solid, dotted, dashed) plus phase and line cap/join options per layer.
-fx-border-width <size> or <t> <r> <b> <l> [, ...]* null Thickness of each border stroke layer, per side.

Border images

Property Values Default Description
-fx-border-image-source <uri> [, <uri>]* null Image URIs used to paint the border.
-fx-border-image-insets <size> or <t> <r> <b> <l> [, ...]* 0 0 0 0 Insets for each border image layer.
-fx-border-image-repeat <repeat-style> [, ...]* repeat repeat Tiling behavior for each border image.
-fx-border-image-slice <size> or <t> <r> <b> <l> [fill] [, ...]* 100% Divides each border image into nine regions. Adding fill preserves the center region.
-fx-border-image-width <size> or <t> <r> <b> <l> [, ...]* 1 1 1 1 Width of each border image slice per side.

Other Region properties

Property Values Default Description
-fx-padding <size> or <t> <r> <b> <l> 0 0 0 0 Interior padding between the region border and its content.
-fx-shape <string> null SVG path string that defines a custom clip shape for the region.
-fx-scale-shape true | false true When true, the shape is scaled to fit the region.
-fx-position-shape true | false true When true, the shape is centered within the region.
-fx-snap-to-pixel true | false true When true, positions and sizes are rounded to whole pixel boundaries.
-fx-min-width <size> -1 Minimum width. -1 uses the computed minimum.
-fx-pref-width <size> -1 Preferred width. -1 uses the computed preferred.
-fx-max-width <size> -1 Maximum width. -1 uses the computed maximum.
-fx-min-height <size> -1 Minimum height. -1 uses the computed minimum.
-fx-pref-height <size> -1 Preferred height. -1 uses the computed preferred.
-fx-max-height <size> -1 Maximum height. -1 uses the computed maximum.

CSS Properties -- Node

Property Values Default Description
-fx-blend-mode add | blue | color-burn | color-dodge | darken | difference | exclusion | green | hard-light | lighten | multiply | overlay | red | screen | soft-light | src-atop | src-in | src-out | src-over null Blend mode used when compositing this node with nodes beneath it.
-fx-cursor null | crosshair | default | hand | move | e-resize | h-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | v-resize | text | wait | <url> null (inherits) Mouse cursor shape shown when the pointer is over this node. Inherits from parent by default.
-fx-effect <effect> null A visual effect (e.g. DropShadow, InnerShadow) applied to the rendered node.
-fx-focus-traversable true | false false Whether this node participates in focus traversal via the keyboard Tab key.
-fx-view-order <number> 0 Adjusts rendering and hit-test order within the parent without changing the scene graph order.
-fx-opacity <number> [0.0 - 1.0] 1 Opacity of the node. 0 is fully transparent, 1 is fully opaque.
-fx-rotate <number> 0 Rotation angle in degrees applied around the node's center point. Positive values are clockwise.
-fx-scale-x <number> 1 Scale factor along the X axis about the node's center.
-fx-scale-y <number> 1 Scale factor along the Y axis about the node's center.
-fx-scale-z <number> 1 Scale factor along the Z axis about the node's center.
-fx-translate-x <number> 0 Translation offset along the X axis in pixels.
-fx-translate-y <number> 0 Translation offset along the Y axis in pixels.
-fx-translate-z <number> 0 Translation offset along the Z axis in pixels.
visibility visible | hidden | collapse | inherit visible Controls whether the node is rendered and participates in layout. collapse removes it from layout; hidden keeps the space.
-fx-managed true | false true When false, the parent layout does not manage this node's position or size.

Methods

  • FlowPane ()

    Default constructor that creates the FlowPane.

    • @r this object
  • setOrientation (string Orient)

    Sets the flow orientation.

    • @p Orient is a string: HORIZONTAL or VERTICAL.
    • @r this object
  • getOrientation ()

    Returns the flow orientation.

    • @r An AJO wrapping javafx.geometry.Orientation.
  • orientationProperty ()

    Returns the ObjectProperty backing the orientation.

    • @r An AJO wrapping javafx.beans.property.ObjectProperty.
  • setHgap (double G)

    Sets the horizontal gap between child nodes.

    • @p G is a double with the gap in pixels.
    • @r this object
  • getHgap ()

    Returns the horizontal gap between child nodes.

    • @r A double with the gap in pixels.
  • hgapProperty ()

    Returns the DoubleProperty backing the horizontal gap.

    • @r An AJO wrapping javafx.beans.property.DoubleProperty.
  • setVgap (double G)

    Sets the vertical gap between child nodes.

    • @p G is a double with the gap in pixels.
    • @r this object
  • getVgap ()

    Returns the vertical gap between child nodes.

    • @r A double with the gap in pixels.
  • vgapProperty ()

    Returns the DoubleProperty backing the vertical gap.

    • @r An AJO wrapping javafx.beans.property.DoubleProperty.
  • setPrefWrapLength (double Len)

    Sets the preferred length of a single flow line before wrapping.

    • @p Len is a double with the wrap length in pixels.
    • @r this object
  • getPrefWrapLength ()

    Returns the preferred wrap length in pixels.

    • @r A double with the wrap length.
  • prefWrapLengthProperty ()

    Returns the DoubleProperty backing the preferred wrap length.

    • @r An AJO wrapping javafx.beans.property.DoubleProperty.
  • setAlignment (string Align)

    Sets the overall alignment of content within the FlowPane.

    • @p Align is a string Pos value such as CENTER, TOP_LEFT, BOTTOM_RIGHT.
    • @r this object
  • getAlignment ()

    Returns the overall alignment of the FlowPane content.

    • @r An AJO wrapping javafx.geometry.Pos.
  • alignmentProperty ()

    Returns the ObjectProperty backing the alignment.

    • @r An AJO wrapping javafx.beans.property.ObjectProperty.
  • setColumnHalignment (string Halign)

    Sets the horizontal alignment of nodes within a column when the orientation is VERTICAL.

    • @p Halign is a string HPos value: LEFT, CENTER, or RIGHT.
    • @r this object
  • getColumnHalignment ()

    Returns the column horizontal alignment.

    • @r An AJO wrapping javafx.geometry.HPos.
  • columnHalignmentProperty ()

    Returns the ObjectProperty backing the column horizontal alignment.

    • @r An AJO wrapping javafx.beans.property.ObjectProperty.
  • setRowValignment (string Valign)

    Sets the vertical alignment of nodes within a row when the orientation is HORIZONTAL.

    • @p Valign is a string VPos value: TOP, CENTER, BASELINE, or BOTTOM.
    • @r this object
  • getRowValignment ()

    Returns the row vertical alignment.

    • @r An AJO wrapping javafx.geometry.VPos.
  • rowValignmentProperty ()

    Returns the ObjectProperty backing the row vertical alignment.

    • @r An AJO wrapping javafx.beans.property.ObjectProperty.