How to align VBoxes in a SplitPane - javafx

Question

I have a SplitPane (verticle) at the Center of a BorderPane in my Gui. In my SplitPane I add an HBox as the top and a FlowPane as the bottom. Everytime I add a set of cards to a VBox and add the VBox to my FlowPane it adds the VBoxes one after the other instead of adding them vertically. Does anyone know why?
#FXML
private FlowPane setsArea;
//sets
public void addSet(CardSet set) {
VBox setView = new VBox(20);
for (Card card : set.getCards()) {
ImageView imageView = new ImageView(card.getImgUrl());
setView.getChildren().add(imageView);
}
setsArea.getChildren().add(setView);
setViews.put(set, setView);
}
My GameView.fxml where I am adding the SplitPane as the center of my BorderPane.
<center>
<SplitPane dividerPositions="0.5" orientation="VERTICAL" prefHeight="200.0" prefWidth="160.0" style="-fx-background-image: url('game.jpg');" BorderPane.alignment="CENTER">
<items>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
<children>
<HBox fx:id="playAreaTop" />
</children></AnchorPane>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
<children>
<FlowPane fx:id="setsArea" />
</children></AnchorPane>
</items>
</SplitPane>
</center>
How I am adding the cardSets:
Card card = new Basic(Suit.CLUBS, 4, 1);
Card card2 = new Basic(Suit.HEARTS, 5, 2);
Card card3 = new Joker(Suit.JOKER, 15, 3);
Card card4 = new Ace(Suit.HEARTS, 14, 4);
ArrayList<Card> cards = new ArrayList<>();
cards.add(card);
cards.add(card2);
cards.add(card4);
CardSet cardSet = new CardSet(cards);
gameView.addSet(cardSet);
gameView.addSet(cardSet);
gameView.addSet(cardSet);
gameView.addSet(cardSet);
gameView.addSet(cardSet);
gameView.addSet(cardSet);
Thanks.

Answer 1

Adding image into VBox and put them all in a FlowPane don't make them vertically stacked you should replace your FlowPane into a VBox and add the ImageViews to the VBox which stack it's item vertically like so:
<SplitPane dividerPositions="0.5" orientation="VERTICAL" prefHeight="200.0" prefWidth="160.0" style="-fx-background-image: url('game.jpg');" BorderPane.alignment="CENTER">
<items>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
<children>
<HBox fx:id="playAreaTop" />
</children></AnchorPane>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
<children>
<VBox fx:id="setsArea" />
</children></AnchorPane>
</items>
#FXML
private VBox setsArea;
public void addSet(CardSet set){
for (Card card : set.getCards()) {
ImageView imageView = new ImageView(card.getImgUrl());
setsArea.getChildren().add(imageView);
}
setViews.put(set, setView);
}