如何使用 flexbox 打破对象并做出正确反应

Question

我有一种情况，元素按行分组，因此它们的高度相同，当行中的一个元素调整大小时，但当屏幕变小时，我想在列中调整元素，但稍微改变它们的顺序。问题是我不想仅仅为这种不同的布局创建单独的反应组件。我这里有一张图：

Answer 1

在你的外部 div 的样式中添加它

   flexWrap: 'wrap'

查看doc了解更多信息

Answer 2

我会在您的第一张图片中重新构建弹性框。看起来您目前有 3 个 flexbox，每个都是包含两个项目的行。

我会首先拥有一个包含所有元素的顶级 flexbox。在那个顶层 flexbox 中，创建 2 个 flexbox 列（使用 flex-direction: column），每个列包含 3 个元素。第一个 flexbox 列将包含块 1、3、5，第二个将包含 2、4、6。在大屏幕上，父 flexbox 应该并排放置这两个内部 flexbox。将flex-wrap: wrap添加到父flexbox，一旦屏幕变得太小，父flexbox会将第二列推到第一列下方。

如果您想自己创建断点，请使用媒体查询。一旦屏幕变得比你的断点小，将父 flexbox 上的 flex-direction 属性更改为 flex-direction: column。