【问题标题】：Vaadin layout using CSS flex-box?使用 CSS flex-box 的 Vaadin 布局？
【发布时间】：2018-04-14 05:13:49
【问题描述】：

Vaadin 8 (Vaadin Framework) 或 Vaadin 10 (Vaadin Flow) 中是否有使用较新的 CSS flex-box（又名 flexbox）功能的 Layout？

This excellent tutorial 使它看起来像 flex-box 可用于实现 Vaadin 的 GridLayout、VerticalLayout 和 HorizontalLayout。

【问题讨论】：

标签： flexbox vaadin vaadin8 vaadin10

【解决方案1】：

Vaadin 8

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

如果您更喜欢服务器端 java API，目录 https://vaadin.com/directory/component/flexlayout-add-on 中有一个插件。
您始终可以使用 CssLayout，并在您的主题中定义 CSS flex-box 规则
Board (https://vaadin.com/directory/component/vaadin-board) 组件是使用 flex-box 实现的

Vaadin 10（流）

Flow 中的所有 Layouts 都是使用 Flex-box 实现的，这使得它们可以更好地协同工作。 Flow 中还有一个 FlexLayout，它以与上面提到的附加组件类似的方式提供了 flex-box 的 Java API。 HorizontalLayout 和 VerticalLayout 是 flex-box 的特殊情况，因此组合它们时副作用更少（参见：https://vaadin.com/docs/v10/flow/components/tutorial-flow-components-setup.html）。

【讨论】：