使用 CSS flex-box 的 Vaadin 布局?

Vaadin layout using CSS flex-box?

Vaadin 8 (Vaadin Framework) or Vaadin 10 (Vaadin Flow) that uses the newer CSS flex-box (a.k.a.flexbox) 中有 Layout 功能吗?

This excellent tutorial 使 flex-box 看起来可以用来实现 Vaadin 的 GridLayoutVerticalLayoutHorizontalLayout.

Vaadin 8

如果你想在Vaadin 8中使用flex-box,有以下选项

  1. 如果您更喜欢服务器端 java API,目录 https://vaadin.com/directory/component/flexlayout-add-on 中有附加组件。

  2. 您始终可以使用 CssLayout,并在您的主题中定义 CSS 弹性框规则

  3. Board(https://vaadin.com/directory/component/vaadin-board)组件使用flex-box实现

Vaadin 10(流量)

Flow 中的所有布局均使用 Flex-box 实现,使它们能够更好地协同工作。 Flow 中还有一个 FlexLayout,它以与上述附加组件类似的方式提供 Java API 的 flex-box。 Horizo​​ntalLayout 和 VerticalLayout 是 flex-box 的特例,因此组合它们时副作用较小(参见:https://vaadin.com/docs/v10/flow/components/tutorial-flow-components-setup.html)。