I have few shapes added to the flow layout , Initially they are horizontal , when i click on the circle. I am changing the flow layout from horizontal to vertical . After changing the position of the layout from horizontal to vertical the content are vertical, only the last shape just moves few pixel.

import javafx.scene.*;
import javafx.stage.*;
import javafx.scene.shape.*;
import javafx.scene.layout.*;
import javafx.scene.paint.*;
import javafx.geometry.*;
import javafx.ext.swing.*;
import javafx.scene.input.*;
import javafx.scene.text.*;

 

var verticalFlow : Boolean = false;
var rect : Rectangle = Rectangle {
x: 0
y: 0
width: 20
height: 20
fill: Color.BLUE
strokeWidth: 2
}
var circle : Circle = Circle {
centerX: 10
centerY: 10
radius: 10
fill: Color.RED
strokeWidth: 2
onMouseClicked : function ( e : MouseEvent ) {
verticalFlow = not verticalFlow;
println(" vertical = {verticalFlow}");
}
}

var ellipse : Ellipse = Ellipse {
radiusX: 10
radiusY: 7
centerX: 10
centerY: 10
fill: Color.GREEN
strokeWidth: 2
}


var text : Text = Text {
content : bind "Flow vertical = {verticalFlow}"
font : Font {size : 20 }
translateY : 150
}

var flowLayout : Flow = Flow {
hPos : HPos.RIGHT
hGap : 20
vertical : bind verticalFlow
vGap : 20
content : [rect , circle , ellipse]
}

Stage {
scene : Scene {
content : [flowLayout , text]
}
}