具有多种尺寸的CSS Flex动态网格

Question

我有一个flex的问题.

我有一个包装器,可以显示最少1个,最多9个方块.根据网格中的平方数,正方形可以有多种尺寸.除了一个,我已经完成了所有必需的工作,如下图所示:

我的风格是:

.grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: space-between;
    width: 300px;
    height: 300px;
    position: relative;
}

加.图像的大小基于它们的总数和它们在列表中的位置.

所以当我从右下方有一个大正方形(占据4个小方块的位置)和5个小方块时,问题出现了.

最重要的是他应该是第一个.

在他旁边(右上角)是第二个,这也是正确的.

第三个位于左下角,它应位于第二行和最右侧.因为这个,所有其他人都处于错误的位置,所以最后一个是溢出的.

我已经尝试了很多值组合justify-content,align-content,align-items和align-self,但没有工作过.

如果没有针对此的灵活解决方案,我将回到大量课程并定位绝对解决方案.但我不喜欢它.这是太多的风格,看起来不太好.

任何建议将不胜感激.

Answer 1

我认为浮动对你来说是一个更好的选择，看看这个片段：

.grid {
  width: 300px;
}

.box {
  background: orange;
  width: 90px;
  height: 90px;
  margin: 5px;
  float: left;
}

.wide {
  width: 190px;
}

.tall {
  height: 190px;
}

.empty {
  background: transparent
}


/* you can ignore everything after this comment - it's all for illustration */
body {
  background: #334;
  color: white;
  font-family: sans-serif;
}

.example {
  display: inline-block;
  margin: 5px;
  border: 1px solid #445;
  padding: 10px;

  width: 300px;
}

h3 {
  margin: 0 0 5px 0;
}

<div class="example">
  <h3>Example 1</h3>
  <div class="grid">
    <div class="box wide tall"></div>
    <div class="box tall empty"></div>
    <div class="box wide empty"></div>
    <div class="box"></div>
  </div>
</div>

<div class="example">
  <h3>Example 2</h3>
  <div class="grid">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

<div class="example">
  <h3>Example 4</h3>
  <div class="grid">
    <div class="box wide tall"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

Flex 仍在尝试制作完整的元素行，所以你的大方块和你的小方块是一行的一部分；不支持超出此范围的堆叠。

另一方面，Float 尝试将元素填充到任何适合它们的地方。

编辑

我已经用关于如何重现上面大部分图像的示例更新了这个答案（我故意省略了 2 x 2 示例 - 不想用 1.5 高度/宽度的框的类来掩盖答案）。

使用empty类从块以及类中删除颜色tall并wide填充所有大小的点应该可以帮助您自定义您认为合适的布局。一个注意事项 - 此处empty将背景颜色设置为transparent。你的empty班级可能比这更多或更少。empty如果它只是一个没有内容的 div，你甚至可能不需要一个类。