行为与包装之间的Flexbox空间

Question

我正在使用flexbox创建一个漂亮的瓷砖网格,当瓷砖不适合一行时会自动换行.

我使用justify-content: space-between这样的方法,使得瓷砖粘贴在父容器的左侧和右侧,并且任何剩余的空间仅分布在"中间"而不是左侧和右侧.

任何其他justify选项也会在外部两个弹性项目的左侧和右侧放置空间.

问题是,当一行没有与前一行相同数量的图块时,我希望最后一行的图块与左边对齐.这可以仅使用flex属性来完成吗？

目前的结果:

? ? ?
?   ?

期望的结果:

? ? ?
? ?

HTML

<div class="browser">
        <div @click='projectClicked' class="case">
            <h3>Project</h3>
        </div>

        <div @click='projectClicked' class="case">
            <h3>Project</h3>
        </div>

        <div @click='projectClicked' class="case">
            <h3>Project</h3>
        </div>

        <div @click='projectClicked' class="case">
            <h3>Project</h3>
        </div>

        <div @click='projectClicked' class="case">
            <h3>Project</h3>
        </div>
    </div>

CSS

.browser {
    width: 700px;
    display:flex;
    justify-content: space-between;
    padding-bottom:100px;
    flex-wrap:wrap;
    border:1px solid red;
}
.case {
    flex: 0 0 200px;
    background-color:#ccc;
    height:100px;
    border:1px solid blue;
    margin-bottom:10px;
}

Codepen

Answer 1

这很烦人，但是您不能为此使用flexbox。恕我直言，他们在制定规格时完全放弃了球，因为您所描述的是我们所有人都希望它具有99％的行为，而可用的周围空间和中间空间使物品以怪异的方式摆放（特别是它们之间的空间）在现实世界中根本没有任何应用。

flex-last-row:真正需要一种“ ”额外的属性来调整最后一行在合理的弹性容器之间或周围的空间上的行为。但这只是我们开发人员的梦想。

周围有一些JavaScript骇客，甚至还有一些非常具体的CSS骇客（“千亿万个计算和特定的nth-childs”类型），但是再一次，使用flexbox的整个理由应该是避免像我们必须避免的反复骇客用float上的clearfix和内联块容器上的font-size：0做...

对我来说，更好的方法是改用CSS网格并应用

/* for space-around style */
.fixed-grid--around{
  grid-template-columns: repeat(auto-fill, minmax(150px,1fr));
  justify-items: center;
}
/* for space-between style*/
.fixed-grid--between{
  grid-template-columns: repeat(auto-fit, 150px);
  justify-content: space-between;
}
/* both should run fixed width elements equal to the declared in the container */ 
.grid-element{
  width: 150px;
}

通过将网格列的最小宽度设置为它们的元素宽度，将最大列宽度设置为1 fr，我们可以使它们均匀分布在它们周围的空间。对于间隔样式，自动调整和间隔之间的技巧就可以了。

因此，它添加了列以填充容器，均匀分配它们之间的空间，直到可以添加另一列，然后根据需要进行包装。正是我们一直希望flexbox能够做到的。

我在探索问题之前制作了一支笔：

https://codepen.io/facundocorradini/pen/XVMLEq

如果要使用此功能，请确保为不支持网格的浏览器添加一些备用。可能是浮点数，内联代码块，flex或其他内容。CSS Grid 确实擅长覆盖后备功能，因此应用起来相当容易。

Answer 2

解决方案是使用伪元素添加隐藏元素，这样您将拥有 6 个元素并保留所需的布局。

.browser {
  width: 700px;
  display: flex;
  justify-content: space-between;
  padding-bottom: 100px;
  flex-wrap: wrap;
  border: 1px solid red;
}

.case {
  flex: 0 0 200px;
  background-color: #ccc;
  height: 100px;
  border: 1px solid blue;
  margin-bottom: 10px;
}
.browser:after {
  content:"";
  flex: 0 0 200px;
}

<div class="browser">
  <div @click='projectClicked' class="case">
    <h3>Project</h3>
  </div>

  <div @click='projectClicked' class="case">
    <h3>Project</h3>
  </div>

  <div @click='projectClicked' class="case">
    <h3>Project</h3>
  </div>

  <div @click='projectClicked' class="case">
    <h3>Project</h3>
  </div>

  <div @click='projectClicked' class="case">
    <h3>Project</h3>
  </div>
</div>
CSS