Jetpack Compose 一直在快速演进。随着新的 FlexBox 布局到来我们终于有了一种强大且灵活的方式来构建自适应 UI。

不言而喻，它的设计理念正是源自 Web 领域的 CSS Flexbox 模型，并且在概念、术语和行为方面几乎完全相同。Ru果你熟悉 display: flex，就会发现 FlexBox 的属性和行为几乎完全相同。

在 FlexBox 之前，Ru果你想Zuo“横向/纵向的线性排列”，通常会用 RowColumn；Ru果又需要根据空间自动换行，则会转向 FlowRow / FlowColumn。而 FlexBox geng像是它们Neng力的“超集”：在保留熟悉使用体验的同时提供了对对齐、换行与子项分配方式geng细的控制。

过去的我们常在“刚性布局”与“geng动态的布局”间二选一，但是现在FlexBox 试图把两者的优势合并在一起——既灵活，又尽量保持简单。

对于用过 RowColumn 或 FlowRow 的人，或者你有过 Web CSS3 的开发经验，上手 FlexBox 会hen顺畅。

FlexBox 通常用于在整个屏幕布局中显示少量项，且希望根据不同屏幕尺寸自动调整的布局。

但是 FlexBox 不支持延迟加载。如需显示大量项，请使用 LazyRow 或者 LazyColume 等这种延迟布局，这样会得到geng好的效率。

换句话说Ru果你的布局又多又复杂，那么把 FlexBox 放到 LazyColume 中，当Zuo LazyColume 的子项会是不错的选择。

在开始使用之前，请使用Zui新的 Compose Bom 依赖，当然这样Zuo实际上还不Neng使用 FlexBox，我们还需要将 foundation-layout geng新到Zui新版本

implementation

我当然推荐你使用 lib.versions.toml 去管理依赖，这里只是提醒你别忘了geng新 foundation-layout。

好的，现在我们就Neng使用 FlexBox 了先来第一个简单布局：

FlexBox(
    config = {
        wrap
        gap
    }
) {
    // 每个 Box dou有一个 100dp 的初始大小
    // 有些元素会自动
，填满该行剩余的所有空间
    RedRoundedBox
    BlueRoundedBox
    GreenRoundedBox })
    OrangeRoundedBox })
    PinkRoundedBox })
}

哦，对了此时Ru果你写这段代码，你会得到一个实验性 API 的提示。为了方便，此时我们在顶层文件中声明这个 @file:OptIn，这样整个文件dou不会有这个提示了。

另外说明一下上述代码以及后续代码中出现的 XXXRoundedBox dou有固定的 100dp 大小的尺寸，它的默认代码如下：

@Composable
fun RedRoundedBox {
    Spacer(
        modifier = modifier
            .size
            .clip)
            .drawBackground
    )
}

其他的 XXXRoundedBox 只是颜色上有区分，其它的设置dou是一样的。

上述代码 FlexBox 会将五个子项换行到两行，并以不同的比例展开它们，以填充每行中的可用空间。各项之间存在 8.dp 的垂直和水平间距。

我知道你一定会有hen多疑问，不急，我们往下kan。

FlexBox 的容器行为需要通过单独的 config 去配置：

FlexBox(
    config = {
        direction
        wrap
        alignItems
        alignContent
        justifyContent
        gap
    }
) { // child items }

这是一个稍微复杂点的示例，下面我们详细介绍一下每个配置项的作用。

这里我先介绍 gap，其实 gap 分 rowGap 和 columnGap 在行和列之间添加间距。而 gap 是一个便捷函数，可同时添加 columnGap 和 rowGap。

FlexBox(
    config = {
        wrap
        rowGap
    }
) {
    RedRoundedBox
    BlueRoundedBox
    GreenRoundedBox })
    OrangeRoundedBox })
    PinkRoundedBox })
}

注意，rowGap 设置的是行之间的，也就是竖向的边距。

direction 函数用于设置布局的方向，也就是决定子项的布局方向。它接受以下值：

FlexBox(
    config = {
        wrap
        direction
        gap
    },
    modifier = Modifier.height
) {
    RedRoundedBox
    BlueRoundedBox
    GreenRoundedBox })
    OrangeRoundedBox })
    PinkRoundedBox })
}

Ru果这里不给 height，那么 FlexBox 就会像普通的 Column 一样向下布局。

justifyContent 用于确定在布局方向上，如何分配子项。下表显示了当方向为 Row 时的行为：

Ru果你熟悉 LazyColumn 或者 LazyRow 的话，相信你理解这些属性是信手拈来。

alignItems 用于确定在单行中沿布局方向是如何对子项对齐的。当然各个子项也Ke以使用 alignSelf 来替换此行为。

以下图片展示了方向为 Row 时的行为：

alignContent 可将各行对齐到布局方向上，并在各行之间分配额外的空间。此属性仅在有多行文本时适用。以下图片展示了当方向为 Row 时的行为：

alignItems 和 alignContent 的区别：alignItems 用于设置单行的对齐方式；而 alignContent 是设置整个子项的对RE行的对齐方式，它将这个子项kan作一个整体。

wrap 用于设置换行行文，该功Neng可让 FlexBox 容器变为多行，并将无法放下的子项沿布局方向移动到新行或新列。

wrap 需要一个 FlexWrap 类型，FlexWrap 支持三个值：

我们对比下 NoWrap 和 Wrap

FlexBox(
    config = {
        wrap
        direction
        gap
    },
) {
    RedRoundedBox
    BlueRoundedBox
    GreenRoundedBox
    OrangeRoundedBox
    PinkRoundedBox
}

Ru果改成 Wrap，则会自动换行，会保证所有内容显示下：

厉害吧！换行——我个人认为就是响应式布局的核心。

我们用一个简单例子，来简述 FlexBox 的运作方式。假设 FlexBox 容器的主要大小为 100dp，wrap 设置为 FlexWrap.Wrap —— 即Ke以换行，间距为 8dp。它包含三个项目，分别具有 20dp40dp 和 50dp。

该行有 100dp 可用空间。子项目 RedRoundedBox 为 20dp。 有空间，因此将 RedRoundedBox 放置到该行中：

此时该行还有 80dp 可用空间。间距为 8dp。子项目 BlueRoundedBox 为 40dp。所需空间为 48dp。有空间，因此 BlueRoundedBox 也会放置到该行中。

现在该行有 32dp 个可用空间。间距为 8dp。子项目 GreenRoundedBox 为 50dp。所需空间为 58dp。

糟糕，当前行中的空间不足，因此 GreenRoundedBox 放置在新行中。

当我们研究完容器的属性和行为之后我们来kankan作为 FlexBox 的子项，有哪些行为Ke以设置。

子项的行为设置比较特殊，需要使用 Modifier.flex，它Ke以控制 FlexBox 内的子项如何geng改大小、顺序和对齐方式。

使用 basisgrow 和 shrink 函数来控制子项的大小。例如：

FlexBox {
    RedRoundedBox(
        modifier = Modifier.flex {
            basis
            grow
            shrink
        }
    )
}

basis 可指定在分配任何额外空间之前商品的初始大小。Ke以将此值视为商品的首选尺寸。

首选尺寸的意思是：先用这个尺寸试试kan！下面会细讲

basis 有三种设置方式：

下面依次举例说明。