包装项目之间的柱状flexbox间距[复制]

不幸的是,在flexbox的当前迭代(级别1)中,没有一种干净的方法来解决最后一行的对齐问题。这是一个常见的问题。

• last-row
• last-column
• only-child-in-a-row
• alone-in-a-column

• CSS Working Group Wiki - Specification Issues and Planning
• https://lists.w3.org/Archives/Public/www-style/2015Jan/0150.html

虽然这种行为在flexbox中很难实现,但在 CSS网格布局

• Equal width flex items even after they wrap

如果网格不是一个选项,下面是一个包含各种flexbox破解的类似问题的列表:

• Properly sizing and aligning the flex item(s) on the last row
• Flex-box: Align last row to grid
• Flexbox wrap - different alignment for last row
• How can a flex item keep the same dimensions when it is forced to a new row?
• Selector for an element alone in a row?
• Aligning elements in last flexbox row
• How can I allow flex-items to grow while keeping the same size?
• Left-align last row of flexbox using space-between and margins
• Inconsistent margin between flex items on last row
• How to keep wrapped flex-items the same width as the elements on the previous row?
• How to align left last row/line in multiple line flexbox
• Last children of grid get giant gutter cause of flexbox space-between
• Managing justify-content: space-between on last row
• Flexbox space between behavior combined with wrap
• Possible to use CSS Flexbox to stretch elements on every row while maintaining consistent widths?

作为一种快速而肮脏的解决方案,可以使用:

.my-flex-child:last-child/*.product:last-child*/ {
  flex-grow: 100;/*Or any number big enough*/
}

您可以尝试在此处使用网格而不是flexbox:

#products-list {

  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 250px)); //grid automagic
  justify-content: start; //start left

}

Fiddle link

我使用了这个解决方案,即使它不是很优雅,也没有使用Flexbox的功能。

可在以下条件下进行:

• 这些物品有固定的宽度
• SCSS/SASS系统 (可以避免)

 $itemWidth: 400px;
 $itemMargin: 10px;

html, body {
  margin: 0;
  padding: 0;
}

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 auto;
  border: solid 1px blue;
}

@for $i from 1 through 10 {
  @media only screen and (min-width: $i * $itemWidth + 2 * $i * $itemMargin) {
    .flex-container {
      width: $i * $itemWidth + 2 * $i * $itemMargin;
    }
  }
}

.item {
  flex: 0 0 $itemWidth;
  height: 100px;
  margin: $itemMargin;
  background: red;
}

<div class="flex-container">
  <div class="item"></div>
  <div class="item" style="flex: 500 0 200px"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Here 我在 它还实现了裕度。

好吧,这是真的,我们也可以在flexbox之前做,但是 display: flex 对于快速响应的设计来说仍然是必不可少的。

一个简单的技巧是添加一个灵活的空间来填充最后一行的其余部分:

#products-list::after {
    content: "";
    flex: auto;
}

但是你不应该在项目上使用边距。而是用衬垫把它们包起来。

Your fiddle updated

总有一个很好的解决办法。 添加一个带有类product的div(对于flex下的其他项是相同的类),并为此添加一个样式div:高度:0像素; 你需要增加尽可能多的跳水动作在一排。

<div class="product" style="height:0px">

这就是全部。永远有效。