Css 如何在多行flexbox中对齐左最后一行/行

我有一个关于flexbox布局的主要问题。我用一个装满图像的盒子构建了一个容器，我决定使用flexbox布局来调整内容，使其看起来像一个网格

她的密码是：

<div class="container">

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

</div>

除了最后一行外，所有的东西看起来都很好——当它不包含与其他行相同数量的元素时，居中元素，它打破了我的网格效果

---

如何将最后一行/行与左侧对齐？

我已经检查过了，它在我的HTML编辑器工具中工作得更好

剧本应该是这样的

CSS部分

<div class="container">

    <div class="item"><a href='google.com'>Google</a></div>
    <div class="item"><a href='google.com'>Yahoo</a></div>
    <div class="item"><a href='google.com'>Bing</a></div>
</div>

<div class="container">
    <div class="item"><a href='google.com'>Google</a></div>
    <div class="item"><a href='google.com'>Yahoo</a></div>
    <div class="item"><a href='google.com'>Bing</a></div>

</div>

.container{
显示：flex；
显示：-webkit flex；
显示：-moz-flex；
对正内容：空格；
-webkit内容：周围空间；
-moz justify内容：周围空格；
灵活流程：行换行；
-webkit flex流：行换行；
-moz flex流：行换行；
}

项目{宽度：130px；高度：180px；背景：绿色； 边距：0 1%24px；}

HTML部分

<div class="container">

    <div class="item"><a href='google.com'>Google</a></div>
    <div class="item"><a href='google.com'>Yahoo</a></div>
    <div class="item"><a href='google.com'>Bing</a></div>
</div>

<div class="container">
    <div class="item"><a href='google.com'>Google</a></div>
    <div class="item"><a href='google.com'>Yahoo</a></div>
    <div class="item"><a href='google.com'>Bing</a></div>

</div>

---

这不是您想要达到的效果吗

CSS:

HTML:

---

不幸的是，这在flexbox中是不可能的。

.filling-empty-space-childs {
    width:205px; /*the width of the images in this example*/
    height:0; /*Important! for the divs to collapse should they fall in a new row*/
}

最好的解决方法是在最后一行添加不可见的子对象“填充”空的“块”。这样，实际可见的元素将向左对齐

类似问题：

---

您可以将flexbox与

最大宽度一起使用（已删除供应商前缀）：

还有HTML

<div class="container">
    <div class="column">1</div>
    <div class="column">2</div>
    <div class="column">3</div>
    <div class="column">4</div>
</div>


1.
2.
3.
4.

CodePen上的视图：
我认为这个示例对于想要多个项目并允许响应的人可能很有用，网格项目根据视口大小而变化。它不使用任何不可见的子对象，而是通过css完成的

当最后一行的项目较少且要求页面响应时，可能有人试图将项目向左对齐


示例HTML

<div class="main-container">

    <div class="main-items-container">

        <div class="item-container">
          <h2>Item Name</h2>
        </div>

        <div class="item-container">
          <h2>Item Name</h2>
        </div>

        <div class="item-container">
          <h2>Item Name</h2>
        </div>

        <div class="item-container">
          <h2>Item Name</h2>
        </div>

        <div class="item-container">
          <h2>Item Name</h2>
        </div>

        <div class="item-container">
          <h2>Item Name</h2>
        </div>

    </div>

</div>

明白了。（我想）（这是我在这里的第一个贡献！）

设想一个布局，每行需要4个图像。w:205 h:174
问题：使用justify content:space，如果最后一行没有4个图像（有3个、2个或1个），它们将不尊重网格，它们将扩散。
所以

在html 3 div中创建“填充空白childs”类，如下所示。

.filling-empty-space-childs {
    width:205px; /*the width of the images in this example*/
    height:0; /*Important! for the divs to collapse should they fall in a new row*/
}

flexbox容器具有显示：flex/flex wrap:wrap；/调整内容：周围的空间

最后一行可以有4、3、2、1个图像。
4张图片：没问题，这三个div将折叠成一行，因为它们没有高度。
3个图像：没问题，一个div将位于同一行，不可见，另外两个将换行到新行，但由于没有高度，因此将折叠。
2个图像：没问题，两个div将在同一行，不可见，其余。。。崩溃
1图像：没问题，三个div将填充空间。
您可以在最后一个子flex项上使用
右边距：auto

这里的问题是，您将丢失此flex项左侧属性之间的空间

希望有帮助
 我删除了Flex标记，因为这与Adobe/ApacheUI框架无关。即使您只能调整最后一行的内容，由于周围的空间，您也无法排列元素。您所能做的最好是使用空格：。此外，标准属性上没有moz前缀。它们应该被IE10的属性所取代：只要从代码中删除justify内容，它就会工作。可以使用边距属性微调弹性项之间的间距。我知道这是老生常谈，但卡特兰奇留下的评论是不正确的。如果您不证明内容的合理性，则在调整大小时，右侧会出现间隙。试着调整每把小提琴的宽度，观察右边。您会注意到有一个巨大的差异，请检查：它在JSFIDLE上只显示为一列。从图片上也不清楚它是否以调整大小为中心。从这两个容器判断，它不会随着视口的收缩/增长而动态创建更少/更多的行。只有当您希望在每行上容纳相同数量的元素时，这种方法才有效，而不管容器的大小。询问者使用的是绝对单位（px）。他想要一种类似Windows资源管理器中的图片缩略图的行为，其中每个项目之间的空间会调整，最后一行左对齐，并且每行上的项目数量会根据可用空间而变化。简明。这应该是公认的答案。我提出了一个CSS唯一的解决方案。。需要注意的是，它只能解释两个缺少的项目，因此只能在每个包装行最多有三个项目的flex网格中安全工作。演示：这里的原则是使用伪元素作为“不可见的子元素”，并为它们提供与容器中的项目相同的flex属性。这里有一个很好的解决方法：@WaleedAsender No，这是为了填充空间。他希望将最后一行与前几行的相同列左对齐。这可能是flexbox最想错过的功能。答案很好，我投了赞成票，但我认为不应该将其标记为接受答案。我认为没有办法知道要添加多少不可见的子项，因为它会随着浏览器窗口的大小而变化。这只适用于最后一行。如果有两个或两个以上，他们将共享空间，并且每个人都将在该空间中对齐。虽然有点粗糙，但很有天赋。如果使用React，额外的（n-1）filler div可以很好地封装在包装器组件中。哇，真不错。如果您只需要两列，此溶液可以与
：after
混合
<div class="main-container">

    <div class="main-items-container">

        <div class="item-container">
          <h2>Item Name</h2>
        </div>

        <div class="item-container">
          <h2>Item Name</h2>
        </div>

        <div class="item-container">
          <h2>Item Name</h2>
        </div>

        <div class="item-container">
          <h2>Item Name</h2>
        </div>

        <div class="item-container">
          <h2>Item Name</h2>
        </div>

        <div class="item-container">
          <h2>Item Name</h2>
        </div>

    </div>

</div>

.main-container {
  max-width: 1000px;
  min-width: 300px;
  margin: 0 auto;
  padding: 40px;
  box-sizing: border-box;
  border: 1px solid #000;
}

.main-items-container {
  display: -ms-flexbox;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  padding: 0;
  margin: 10px 0;
  list-style: none;
  width: auto;
  -webkit-flex-flow: row wrap;
  justify-content: flex-start;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: stretch;
  align-items: stretch;
  box-sizing: border-box;
}

@media (min-width: 971px) {
  .item-container {
    margin: 10px 2%;
    width: 22%;
    padding: 10px;
    border: 1px solid #000;
    box-sizing: border-box;
  }
  .item-container:nth-child(4n+1) {
    margin-left: 0;
  }
  .item-container:nth-child(4n) {
    margin-right: 0;
  }
}

@media (min-width: 550px) and (max-width: 970px) {
  .item-container {
    margin: 10px 2.50%;
    width: 30%;
    padding: 10px;
    border: 1px solid #000;
    box-sizing: border-box;
  }
  .item-container:nth-child(3n+1) {
    margin-left: 0;
  }
  .item-container:nth-child(3n) {
    margin-right: 0;
  }
}

@media (max-width: 549px) {
  .item-container {
    margin: 10px 0;
    width: initial;
    padding: 10px;
    border: 1px solid #000;
    box-sizing: border-box;
  }
}

.filling-empty-space-childs {
    width:205px; /*the width of the images in this example*/
    height:0; /*Important! for the divs to collapse should they fall in a new row*/
}