Flex Box：自动换行[重复]答案

【问题标题】：Flex Box: automatic break to new line [duplicate]Flex Box：自动换行[重复]
【发布时间】：2021-05-25 18:43:55
【问题描述】：

我有一个 DIV 容器，它有 N 个孩子（通常是 2 或 3 个）。这些子节点都是具有不同高度的画布节点（一些来自 chart.js，一些来自其他库）。

我需要垂直对齐这些项目，所以我在父元素中使用了这个 css：

.wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

当窗口被调整为更小的宽度时，该行上的元素将消失在屏幕之外。按照设计，我们必须取消屏幕上的任何水平滚动。所有内容都必须位于屏幕宽度内。

我正在尝试获得通常我们可以获得的“自动换行”效果：

.wrapper{
    display: inline-block;
}

当窗口被调整为更小的宽度时，如何让弹性框自动换行？

我还可以接受为父 div 中的节点启用完美垂直对齐的答案，其中 display: inline-block 集。

【问题讨论】：

【解决方案1】：

默认情况下，flexbox 容器设置为不换行。您可以通过 flex-wrap 属性对其进行更改。

.wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

【讨论】：