代码之家 › 专栏 › 技术社区 › Dan

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

flexbox css3 css html

Dan · 技术社区 · 6 年前

#products-list {
    position:relative;
    display: flex;
    flex-flow: row wrap;
    width:100%;
}

#products-list .product {
    min-width:150px;
    max-width:250px;
    margin:10px 10px 20px 10px;
    flex:1;
}

我创造了 a dynamic situation in jsFiddle

我的flex div可以收缩到150px,然后增长到250px,但是所有的都必须是相同的大小(显然,我想要一个CSS解决方案,JS我知道方法)。

0 回复 | 直到 5 年前

Michael Benjamin 6 年前

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

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

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

Equal width flex items even after they wrap

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

Boris D. Teoharov 5 年前

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

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

Dostrelith 4 年前

您可以尝试在此处使用网格而不是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

TylerH Skiller Dz 6 年前

我使用了这个解决方案,即使它不是很优雅,也没有使用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 对于快速响应的设计来说仍然是必不可少的。

Fanky 4 年前

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

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

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

Your fiddle updated

simi 4 年前

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

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

这就是全部。永远有效。