具有多种尺寸的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

我认为浮动是一个更好的选择，请看这个片段：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Flex仍在尝试制作完整的元素行，因此你的大方块和小方块都是一行的一部分;除此之外，我们不支持堆叠。

另一方面，

Float会尝试将元素填充到适合它们的任何位置。

修改

我已经通过以下示例更新了这个答案：如何重现上面的大部分图片（我有目的地省略了2×2的例子 - 没想要用类填充答案高度/宽度为1.5的盒子。

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

Answer 2

无法在单个容器中使用flex处理此布局。

你需要做一个小技巧来实现它。

更容易的是将第三个项目从flex布局中取出，将其定位为绝对：

＆＃13;

＆＃13;

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

.item {
    background-color: lightblue;
    width: 100px;
    height: 100px;
    margin: 0px;
    border: transparent solid 5px;
    box-sizing: border-box;
    background-clip: content-box;
}

.item:first-child {
    width: 200px;
    height: 200px;
}

.item:nth-child(2) {
    background-color: blue;
    position: absolute;
    top: 100px;
    right: 0px;
}

＆＃13;

<div class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

另一个可能性，可能更多的是灵活的想法，但也很棘手

设置大元素的边缘底部为负，这使得它只占据一行（行的高度与小框的大小相同）。

现在有一个3行的布局。问题是第3个盒子将位于第一个大盒子下面。为了解决这个问题，我们设置了一个伪元素（我已将样式片段设置为可见，在生产中将其设置为高度0并且它将消失）具有相同的第一个元素的宽度和边距属性。

＆＃13;

＆＃13;

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

.grid:after {
   content: "";
  order: 3;
  background-color: red;
  width: 190px;
  height: 10px;
  margin: 5px;
}

.item {
    background-color: lightblue;
    width: 90px;
    height: 90px;
    margin: 5px;
}

.item:first-child {
    width: 190px;
    height: 190px;
  margin-bottom: -100px;
  order: 1;
  opacity: 0.5;
}

.item:nth-child(2) {
  order: 2;
}

.item:nth-child(n+3) {
  order: 4;  
}

＆＃13;

<div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>

＆＃13;

＆＃13;

＆＃13;