行为与包装之间的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。 imho 他们在制定规范时完全放弃了球，正如你所描述的那样，我们都希望99％的时间都有这种行为，而可用的空间和space-between使项目以奇怪的方式定位（特别是空间），在现实世界中根本没有应用。

A＆＃34; flex-last-row:＆＃34;一些额外的属性来调整空间之间的最后一行的行为或空间对齐的flex-containers将是非常受欢迎的。但那只是在我们的开发者梦想中。

它周围有javascript hacks，甚至还有一些非常具体的CSS hacks（＆＃34; gazillion calcs和特定nth-childs＆＃34; 类型），但是又一次，使用flexbox的全部原因应该是避免重复出现的黑客攻击，就像我们在浮点数上使用clearfixes而在内联块容器中使用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

如果您要使用此功能，请确保为不支持网格的浏览器添加一些备用内容。可能是浮点数，内联块，弹性或其他任何东西。 CSS Grid是really good at overriding the fallbacks，因此它很容易应用。

Answer 2

您可以使用grid-template-columns: repeat(auto-fit, 200px)和justify-content: space-between进行CSS网格布局。

＆＃13;

＆＃13;

.browser {
  width: 700px;
  display: grid;
  grid-template-columns: repeat(auto-fit, 200px);
  justify-content: space-between;
  padding-bottom: 100px;
  border: 1px solid red;
}

.case {
  background-color: #ccc;
  height: 100px;
  border: 1px solid blue;
  margin-bottom: 10px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

＆＃13;

＆＃13;

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

＆＃13;

<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

＆＃13;

＆＃13;

＆＃13;