flexLayout - flex 布局

flexLayout 使用 CSS 的 Flexbox 模型 排列内部子组件。

XML 元素

flexLayout

Java 类

FlexLayout

基本用法

在线示例

这个示例展示了 flexDirection、alignItems、justifyContent 和 flexWrap 如何控制子组件的排列。flexLayout 没有预定义的宽度或高度。

<flexLayout alignItems="CENTER" flexDirection="ROW"
            justifyContent="CENTER" flexWrap="WRAP"
            classNames="flex-with-gap">
    <span text="Span"/>
    <textField placeholder="TextField"/>
    <button text="Button"/>
    <button text="Button"/>
</flexLayout>

内容对齐

contentAlignment 属性对应于 CSS 的 align-content 属性。该属性控制 flex 容器内子组件在有剩余空间时，交叉轴 方向上的对齐方式。与 主轴 的属性 justify-content 类似，该属性设置 主轴 方向子组件的对齐方式。

该属性仅影响 多行 flex 容器，即 flex-wrap 设置为 wrap 或 wrap-reverse 的容器。单行 flex 容器（即，flex-wrap: no-wrap 时）不受该属性影响。

START

内部元素位于容器的起始位置。

flex layout start
XML 代码 
<flexLayout contentAlignment="START"
            css="gap: 0.5em; border: 1px solid #ccc;"
            width="20em"
            minHeight="10em"
            flexWrap="WRAP">
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
</flexLayout>

CENTER

内部元素位于容器的中心位置。

flex layout center
XML 代码 
<flexLayout contentAlignment="CENTER"
            css="gap: 0.5em; border: 1px solid #ccc;"
            width="20em"
            minHeight="10em"
            flexWrap="WRAP">
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
</flexLayout>

END

内部元素位于容器的末端位置。

flex layout end
XML 代码 
<flexLayout contentAlignment="END"
            css="gap: 0.5em; border: 1px solid #ccc;"
            width="20em"
            minHeight="10em"
            flexWrap="WRAP">
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
</flexLayout>

STRETCH

内部元素拉伸以填充容器交叉轴方向的空间。

flex layout stretch
XML 代码 
<flexLayout contentAlignment="STRETCH"
            css="gap: 0.5em; border: 1px solid #ccc;"
            width="20em" minHeight="10em"
            flexWrap="WRAP">
    <button text="Button" width="9em" height="AUTO"/>
    <button text="Button" width="9em" height="AUTO"/>
    <button text="Button" width="9em" height="AUTO"/>
</flexLayout>

SPACE_BETWEEN

内部元素在容器内均匀分布。第一个元素与容器开始对齐，最后一个与容器末端对齐。

flex layout space between
XML 代码 
<flexLayout contentAlignment="SPACE_BETWEEN"
            css="gap: 0.5em; border: 1px solid #ccc;"
            width="20em" minHeight="10em"
            flexWrap="WRAP">
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
</flexLayout>

SPACE_AROUND

内部元素在容器内均匀分布。第一个和最后一个元素的两边都有一半宽度的空间。

flex layout space around
XML 代码 
<flexLayout contentAlignment="SPACE_AROUND"
            css="gap: 0.5em; border: 1px solid #ccc;"
            width="20em" minHeight="10em"
            flexWrap="WRAP">
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
</flexLayout>

单元素延展

将 expand 设置为子组件的 ID，即，为组件设置 flex-grow: 1，使其能够沿主轴占据剩余空间。

<flexLayout id="flexLayout"
            flexDirection="COLUMN"
            expand="button"
            height="100%"
            width="100%">
    <button text="Button"/>
    <button id="button" text="Button"/>
    <button text="Button"/>
</flexLayout>

主轴方向

flexDirection 属性对应于 CSS 的 flex-direction 属性。该属性设置 flex 容器内的元素的排列方式，确定主轴和方向（正序或倒序）。

ROW

内部元素水平排列成一行。

flex direction row
XML 代码 
<flexLayout flexDirection="ROW"
            css="gap: 0.5em">
    <button text="Button 1"/>
    <button text="Button 2"/>
    <button text="Button 3"/>
</flexLayout>

ROW_REVERSE

内部元素水平排列成一行，但是为倒序排列。

flex direction row reverse
XML 代码 
<flexLayout flexDirection="ROW_REVERSE"
            css="gap: 0.5em">
    <button text="Button 1"/>
    <button text="Button 2"/>
    <button text="Button 3"/>
</flexLayout>

COLUMN

内部元素垂直排列为一列。

flex direction column
XML 代码 
<flexLayout flexDirection="COLUMN">
    <button text="Button 1"/>
    <button text="Button 2"/>
    <button text="Button 3"/>
</flexLayout>

COLUMN_REVERSE

内部元素垂直排列为一列，但是以倒序排列。

flex direction column reverse
XML 代码 
<flexLayout flexDirection="COLUMN_REVERSE">
    <button text="Button 1"/>
    <button text="Button 2"/>
    <button text="Button 3"/>
</flexLayout>

内容换行

flexWrap 属性对应于 CSS 的 flex-wrap 属性。确定内部元素是强制为单行还是可以换行至多行。如果允许换行，还可以设置内部元素的堆叠方向（正序或倒序）。

NOWRAP

内部元素强制单行排列，可能会溢出布局容器。

flex wrap nowrap
XML 代码 
<flexLayout flexWrap="NOWRAP"
            css="gap: 0.5em; border: 1px solid #ccc;"
            width="20em">
    <button text="Button 1" width="9em"/>
    <button text="Button 2" width="9em"/>
    <button text="Button 3" width="9em"/>
</flexLayout>

WRAP

内部元素分为多行排列。

flex wrap wrap
XML 代码 
<flexLayout flexWrap="WRAP"
            css="gap: 0.5em; border: 1px solid #ccc;"
            width="20em">
    <button text="Button 1" width="9em"/>
    <button text="Button 2" width="9em"/>
    <button text="Button 3" width="9em"/>
</flexLayout>

WRAP_REVERSE

内部元素分为多行，以倒序排列。

flex wrap wrap reverse
XML 代码 
<flexLayout flexWrap="WRAP_REVERSE"
            css="gap: 0.5em; border: 1px solid #ccc;"
            width="20em">
    <button text="Button 1" width="9em"/>
    <button text="Button 2" width="9em"/>
    <button text="Button 3" width="9em"/>
</flexLayout>

内容排列

justifyContent 属性对应于 CSS 的 justify-content 属性。该属性控制在 flex 容器的主轴方向如何分配空间。

值

描述

START（默认）

内部元素位于容器的起始位置。

CENTER

内部元素位于容器的中心位置。

END

内部元素位于容器的末端位置。

BETWEEN

内部元素之间有空白，第一个元素位于主轴的起始位置，最后一个元素位于结束位置。

AROUND

每个内部元素两侧的间隔相等，两端间隔减半。

EVENLY

每个内部元素两侧的间隔（以及边缘间隔）相等，平均分布。

使用示例，请访问 布局规则。

XML 属性

通用属性 对所有组件都是一样的配置。 下面是 flexLayout 的特殊属性：

名称 描述 默认值

contentAlignment

设置对齐方式。参阅 内容对齐。

STRETCH

expand

设置一个子元素的 id，该元素可以延展以占据所有可用空间。参阅 延展。

flexDirection

设置布局的 flex 方向属性。参阅 主轴方向。

ROW

flexWrap

设置布局的换行属性。参阅 内容换行。

NOWRAP

justifyContent

设置内容的排列方式。参阅 内容排列。

START

事件和处理器

通用事件和处理器 对所有组件都是一样的配置。 下面是 flexLayout 的特殊事件和处理器：

名称 描述

clickListener

当用户点击布局时触发标题为 click 的 com.vaadin.flow.component.ClickEvent。使用组件的 addClickListener() 可以注册事件的处理方法。

doubleClickListener

当用户在短时间内点击组件两次时触发标题为 doubleClick 的 com.vaadin.flow.component.ClickEvent。使用组件的 addDoubleClickListener() 可以注册事件的处理方法。

singleClickListener

当用户在单击组件一小段时间后会（确保不是双击）触发标题为 singleClick 的 com.vaadin.flow.component.ClickEvent。使用组件的 addSingleClickListener() 可以注册事件的处理方法。

XML 内部元素

一个 flexLayout 可以包含按照其 flex 属性排布的组件和布局。