VBox

In JavaFX, a VBox is a layout container that arranges its children vertically, one on top of another.

• It’s the vertical counterpart of HBox.
• You can control spacing, padding, and alignment.
• Useful for stacking buttons, labels, forms, or any vertical UI components.

Basic Example

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class VBoxExample extends Application {

    @Override
    public void start(Stage stage) {

        // Create VBox
        VBox vbox = new VBox(10); // 10px spacing between children
        vbox.setAlignment(Pos.CENTER); // center all children vertically

        // Add children
        Button btn1 = new Button("Button 1");
        Button btn2 = new Button("Button 2");
        Button btn3 = new Button("Button 3");
        vbox.getChildren().addAll(btn1, btn2, btn3);

        // Create scene
        Scene scene = new Scene(vbox, 300, 200);
        stage.setTitle("VBox Example");
        stage.setScene(scene);
        stage.show();
    }

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

Result:

   Button 1
   Button 2
   Button 3

• Buttons are stacked vertically.
• Spacing of 10px between each button.
• Centered inside the VBox.

Key Properties

vbox.setSpacing(10);           // space between children
vbox.setAlignment(Pos.CENTER);  // alignment of all children
vbox.setPadding(new Insets(10)); // padding around VBox

• Pos.TOP_LEFT, CENTER, BOTTOM_RIGHT, etc.
• Each child can have individual alignment using VBox.setVgrow(node, Priority.ALWAYS)

FXML Version

<VBox xmlns:fx="http://javafx.com/fxml" spacing="10" alignment="CENTER" padding="10">
    <children>
        <Button text="Button 1"/>
        <Button text="Button 2"/>
        <Button text="Button 3"/>
    </children>
</VBox>

Use Cases

• Stacking buttons vertically (menus, tool panels)
• Vertical forms with labels and text fields
• Sidebar navigation panels
• Vertical lists of controls

✅ Difference from HBox:

• VBox → vertical layout
• HBox → horizontal layout