Vaadin layout using CSS flex-box?

Question

Is there a Layout in Vaadin 8 (Vaadin Framework) or Vaadin 10 (Vaadin Flow) that uses the newer CSS flex-box (a.k.a. flexbox) feature?

This excellent tutorial makes it look like flex-box could be used to implement Vaadin’s GridLayout, VerticalLayout, and HorizontalLayout.

Answer 1

Vaadin 8

If you want to use flex-box in Vaadin 8, there are following options

1. If you prefer server side java API, there is add-on in directory https://vaadin.com/directory/component/flexlayout-add-on that has that.

2. You can always use CssLayout, and define CSS flex-box rules in your theme

3. The Board (https://vaadin.com/directory/component/vaadin-board) component is implemented using flex-box

Vaadin 10 (Flow)

All Layouts in Flow are implemented using Flex-box, making them function better together. There is also a FlexLayout in Flow, that gives Java API of flex-box in similar fashion than the add-on mentioned above. HorizontalLayout and VerticalLayout are special cases flex-box, so there is less side effects when combining these (see: https://vaadin.com/docs/v10/flow/components/tutorial-flow-components-setup.html).