Flexbox容器项目左对齐[重复]答案

【问题标题】：Flexbox container items aligned to the left [duplicate]Flexbox容器项目左对齐[重复]
【发布时间】：2016-12-05 04:29:54
【问题描述】：

我正在尝试使用 Flexbox 创建一个网格。

<div class="wrap">
  <div class="item one"></div>

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

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

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

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

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

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

我想要的是将最后一个 div 向左对齐（不使用float），请参见下面的示例。

JS Bin example

为了更好的可视化，我附上了图片 - 注意最后两张产品卡片，它们与左侧对齐

那么，Flexbox 如何帮助解决这样的问题呢？

【问题讨论】：

标签： css flexbox

【解决方案1】：

使用flex-direction:column 和align-self:flex-start

片段

.wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 325px;
}
.item {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 2px solid blue;
  height: 200px;
  width: 100px;
}
.item div {
  border: 2px solid red;
  height: 30px;
  width: 60px;
}
/*.sale {
  align-self: flex-start;
}*/

div div div:nth-of-type(3) {
  align-self: flex-start;
}

<div class="wrap">
  <div class="item one">
    <div>ITEM</div>
    <div>DESC</div>
    <div class='sale'>SALE</div>
    <div>PRICE</div>
  </div>

  <div class="item one">
    <div>ITEM</div>
    <div>DESC</div>
    <div class='sale'>SALE</div>
    <div>PRICE</div>
  </div>
  <div class="item one">
    <div>ITEM</div>
    <div>DESC</div>
    <div class='sale'>SALE</div>
    <div>PRICE</div>
  </div>
  <div class="item one">
    <div>ITEM</div>
    <div>DESCRIPTION</div>
    <div class='sale'>SALE</div>
    <div>PRICE</div>
  </div>
  <div class="item one">
    <div>ITEM</div>
    <div>DESC</div>
    <div class='sale'>SALE</div>
    <div>PRICE</div>
  </div>
  <div class="item one">
    <div>ITEM</div>
    <div>DESC</div>
    <div class='sale'>SALE</div>
    <div>PRICE</div>
  </div>
  <div class="item one">
    <div>ITEM</div>
    <div>DESC</div>
    <div class='sale'>SALE</div>
    <div>PRICE</div>
  </div>
</div>

【讨论】：

Thanx，但这不是我想要的，因为您每次都需要手动设置最后一个 div 的样式。我只是希望它们默认对齐，就像 Bootstrap container-fluid 一样。如果视口太小而无法包含所有项目，它只会将其余项目从左侧开始放在下一行。
您还会如何挑选出您想要抵消的那些？引导你必须做同样的事情。有多种方法可以使用第 n 个选择器，这更难维护，但您不需要将类放在单个元素上。查看更新。
是的，它肯定很有用 - 谢谢，但也许还有另一种方法。虽然我还不确定