1. JavaFX Tutorial
2. JavaFX Overview
3. Your First JavaFX Application
4. JavaFX Stage
5. JavaFX Scene
6. JavaFX Node
7. JavaFX Properties
8. JavaFX FXML
9. JavaFX CSS Styling
10. JavaFX ImageView
11. JavaFX Text
12. JavaFX Fonts
13. JavaFX Hyperlink
14. JavaFX Label
15. JavaFX Button
16. JavaFX MenuButton
17. JavaFX SplitMenuButton
18. JavaFX ToggleButton
19. JavaFX RadioButton
20. JavaFX CheckBox
21. JavaFX ChoiceBox
22. JavaFX ComboBox
23. JavaFX ListView
24. JavaFX DatePicker
25. JavaFX ColorPicker
26. JavaFX TextField
27. JavaFX PasswordField
28. JavaFX Slider
29. JavaFX TextArea
30. JavaFX ToolBar
31. JavaFX Tooltip
32. JavaFX ProgressBar
33. JavaFX FileChooser
34. JavaFX DirectoryChooser
35. JavaFX Accordion
36. JavaFX TitledPane
37. JavaFX SplitPane
38. JavaFX TabPane
39. JavaFX ScrollPane
40. JavaFX Group
41. JavaFX Region
42. JavaFX Pane
43. JavaFX HBox
44. JavaFX VBox
45. JavaFX Separator
46. JavaFX FlowPane
47. JavaFX TilePane
48. JavaFX GridPane
49. JavaFX MenuBar
50. JavaFX ContexMenu
51. JavaFX WebView
52. JavaFX PieChart
53. JavaFX TableView
54. JavaFX TreeView
55. JavaFX TreeTableView
56. JavaFX HTMLEditor
57. JavaFX Pagination
58. JavaFX BarChart
59. JavaFX StackedBarChart
60. JavaFX ScatterChart
61. JavaFX LineChart
62. JavaFX AreaChart
63. JavaFX StackedAreaChart
64. JavaFX Color
65. JavaFX 2D
66. JavaFX Effects
67. JavaFX 3D
68. JavaFX Transformation
69. JavaFX Animation
70. JavaFX Media - JavaFX Video and Audio Support
71. JavaFX Canvas
72. JavaFX Drag and Drop
73. JavaFX Concurrency

• Creating a FlowPane
• Adding Children to a FlowPane
• Adding a FlowPane to the Scene Graph
• Horizontal and Vertical Spacing
• Orientation

A JavaFX FlowPane is a layout component which lays out its child components either vertically or horizontally, and which can wrap the components onto the next row or column if there is not enough space in one row. The JavaFX FlowPane layout component is represented by the class javafx.scene.layout.FlowPane

Creating a FlowPane

You create a JavaFX FlowPane via its constructor. Here is a JavaFX FlowPane instantiation example:

FlowPane flowpane = new FlowPane();

Adding Children to a FlowPane

You can add children to a FlowPane by obtaining its child collection and add adding the components to it you want the FlowPane to layout. Here is an example of adding 3 buttons to a FlowPane:

Button button1 = new Button("Button Number 1");
Button button2 = new Button("Button Number 2");
Button button3 = new Button("Button Number 3");

FlowPane flowpane = new FlowPane();

flowpane.getChildren().add(button1);
flowpane.getChildren().add(button2);
        flowpane.getChildren().add(button3);

Adding a FlowPane to the Scene Graph

To make a FlowPane visible you must add it to the JavaFX scene graph. To do so you must add the FlowPane instance to a Scene object, or add the FlowPane to a layout component which is added to a Scene object.

Here is an example of adding a JavaFX FlowPane to the scene graph:

package com.jenkov.javafx.layouts;

import javafx.application.Application;
import javafx.geometry.Orientation;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;


public class FlowPaneExperiments extends Application  {


    @Override
    public void start(Stage primaryStage) throws Exception {
        primaryStage.setTitle("HBox Experiment 1");

        Button button1 = new Button("Button Number 1");
        Button button2 = new Button("Button Number 2");
        Button button3 = new Button("Button Number 3");

        FlowPane flowpane = new FlowPane();

        flowpane.getChildren().add(button1);
        flowpane.getChildren().add(button2);
        flowpane.getChildren().add(button3);

        Scene scene = new Scene(flowpane, 200, 100);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        Application.launch(args);
    }
}

The application resulting from this application looks like the following screen shots. Notice how the buttons flow down onto the next horizontal line when the window becomes too small to show them all in a single horizontal row.

Horizontal and Vertical Spacing

You can set the horizontal and vertical spacing between the components shown inside a JavaFX FlowPane using its setHGap() and setVGap() methods. Here is an example that shows how to set the horizontal and vertical gap between components in a FlowPane :

flowpane.setHgap(10);
flowpane.setVgap(10);

When added to the example earlier, the resulting application would look like this:

Notice the horizontal and vertical gaps between the buttons now.

Orientation

By default the components in a FlowPane are layed out horizontally, wrapping onto the next horizontal line when there is no longer space enough inside the FlowPane to show more components horizontally.

You can change the flow orientation (direction) of a FlowPane using its setOrientation() method. You can force the components to be layed out in columns from top to bottom, and then change column when there is no more space in the height to show more components. Here is how you do that:

flowpane.setOrientation(Orientation.VERTICAL);