flex

Anyone know of a way to have a “flex-wrap” like layout in Vaadin. I want tiles to fill the width of the screen, and wrap to the next line according to the available width.

See https://www.w3schools.com/csS/css3_flexbox_container.asp#flex-wrap for a HTML example…

Did you try FlexLayout?

now because it is not in the vaadin components documentation :slightly_smiling_face:

didn’t know about it…

FlexLayout flexLayout = new FlexLayout();    flexLayout.setFlexWrap(FlexLayout.FlexWrap.WRAP);

Also it should probably be documented so I made a ticket: Document FlexLayout · Issue #2124 · vaadin/docs · GitHub

thanks, seems to be exactly what I needed.

You beat me with it, I was just searching for Rolf’s ticket about layout doc enhancements :+1:

any idea how some spacing can be added to the items in the flexlayout?

You can use the Lumo CSS utilities like “gap-m”