FlexGrow behaviour

As Flexgrow just uses up the empty space, components of diffrent sizes don’t get aligned as I want to. I always want them to use either half or a forth of the space. Theoreticly Flex 2,1 and 1.
I worked around wiht using Vertical Layouts as Containers, but wonderd if there is an smarter/ easier way?
flex.png

Did you consider FlexLayout?

Not until now, because I mostly tried formatting an already exsiting Layout. I gonna look into it. Just tired it and it doesn’t chnage the flexgrow behaviour.

It doesn’t change it, but is low level and doesn’t interfere with the styles you apply I would say

Using containers inside a FlexLayout is a completely valid approach. If you don’t need a VerticalLayout in there, you can just use a Div

Thanks!

The preferred size of an element is actually set using FlexLayout.setFlexBasis(). Setting the flex basises of those three elements to e.g. “50%”, “25%”, “25%” and then setFlexGrow to 1 on them all, that should give you the proportions you want.

Of course, you could do the same with a HorizontalLayout and setting percentage widths to them with setWidth(“25%”) etc.

Thank you! Gonna try it!

It was even easier! :smile: as all components are in a horizontalLayout, i could just set ther width to the right percentage.
thanks everyone!