如何将 FlexBoxes 用于响应式网格

Question

我正在尝试使用 flex boxes 构建一个响应式网格，该网格根据展开的项目重新排序它的项目。

这是我的 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/

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

当 Box1 展开时，第 1 行应该只展开 Box1，第 2 行现在应该有 Box2 和 Box3。第 3 行在 Box2 下应该只有 Box4。
当Box2展开时，row1应该只有Box 2展开，Row 2应该有Box1和Box3。第 3 行应该只有 Box1 下的 Box4。
当Box3展开时，第一行应该有Box1和Box2，但第二行应该只有Box3打开。第 3 行左边应该只有 Box4。
当框4展开时，第一行应该有Box1和Box2，但第二行应该只有Box4打开。第 3 行左边应该只有 Box3。

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

有人可以帮忙吗？

Answer 1

我不知道你在这里使用任何前端框架还是只是 HTML。据我所知，只需忘记盒子编号，当我们专注于设计时，您可以拥有一个简单的静态布局，就像您分享的那样 fiddle.

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

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

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

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

如何将 FlexBoxes 用于响应式网格

How to use FlexBoxes for a responsive Grid

html

css

styles

flexbox

css-grid