如何将 FlexBox 用于响应式网格

Question

我正在尝试使用弹性框来构建一个响应式网格，该网格根据展开的项目对其项目进行重新排序。

这是我的 HTML

<div class="flex">
  <div class="box1">
    Box1
  </div>
  <div class="box2">
    Box2
  </div>
  <div class="box3">
    Box3
  </div>
  <div class="box4">
    Box4
  </div>
</div>

这是我的 CSS

.flex
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.flex > div
{
   flex: 0 0 50%;
   text-align: center;
   border:  1px #ccc solid;
}


.flex > .box1 {
  flex: 0 0 100%;
}

这是一个工作版本 - http://jsfiddle.net/pwr6xnd8/3/

这就是我希望这些盒子发挥作用的方式：

1. 当 Box1 展开时，第 1 行应该只有 Box1 展开，第 2 行现在应该有 Box2 和 Box3。第 3 行在 Box2 下应该只有 Box4。

2. 当 Box2 展开时，row1 应该只有 Box 2 展开，而 Row 2 应该有 Box1 和 Box3。第 3 行的 Box1 下应该只有 Box4。

3. 当 Box3 展开时，第 1 行应该有 Box1 和 Box2，但第 2 行应该只打开 Box3。第 3 行左侧应该只有 Box4。

4. 当框 4 展开时，第 1 行应该有 Box1 和 Box2，但第 2 行应该只打开了 Box4。第 3 行的左边应该只有 Box3。

现在，例如，当我打开 Box2 时，只有 Box1 留在第 1 行，而 Box 2 在第 2 行展开，而 Box 3 和 Box 4 在第 4 行，这显然不是我想要的。 不确定是否可以使用 flexbox 完全实现此功能，或者我是否可能需要一些 JS 代码。

有人可以帮忙吗？

Answer 1

我不知道您在这里使用任何前端框架或仅使用 HTML。据我所知，忘记盒子编号，当我们专注于设计时，你可以拥有一个简单的静态布局，就像你共享的小提琴一样。

因此我的建议是不要改变那里的布局。只需根据您的输入或任何可用数据更改您需要放在那里的内容。

举个例子。如果您有更多与“BOX-4”相关的数据，您可以决定将其放在您想要的布局中（您可以为 div 提供 id 或者您可以使用任何您想要的方法）

---

如果您有重新组织这些元素的硬性要求，您可以使用 CSS 网格以水平和垂直方式更改元素

这里是使用 CSS 网格模板的方法 https://www.w3schools.com/cssref/tryit.asp?filename=trycss_grid-template3 你可以按照这个，你可以为每个场景创建模板，并通过将它们应用为条件 CSS 以你想要的方式动态更改 CSS 类。