更新

Question

我正在创建一个弹性箱;一个容器有一个max-width，比如说max-width = 500px，子项目每个都有min-width: 130px和flex-grow: 1来填充整个行空间。

这里是小提琴：https://jsfiddle.net/7wroxkhj/6/

我想要实现的是，最后一行项目采用相同宽度的前面项目。即：项目＃7和项目＃8具有相同的项目宽度，从1到6。

我怎样才能做到这一点？

更新

欢迎JS解决方案！

Answer 1

您可能需要考虑列表末尾隐藏弹性项目的内容。

<强> HTML

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
    <div class="child">8</div>
    <div class="child hidden">9</div>  /* new */
    <div class="child hidden">10</div> /* new */
</div>

<强> CSS

.hidden {
    visibility: hidden;
    height: 0;
    font-size: 0;
    margin: 0 10px;
}

DEMO

Answer 2

给予伪元素顶部与赋予元素相同的属性，但高度非常低。

但如果需要超过2个伪元素，则需要另一种技术

＆＃13;

.parent {
  background: red;
  max-width: 500px;
  height: 400px;
  display: flex;
  flex-wrap: wrap;
}
.parent::after {
  content: '';
  flex: 130px 1;
  margin: 10px;
  background-color: yellow;
  height: 10px;
}
.child {
  background: blue;
  margin: 10px;
  flex: 130px 1;
  color: #FFFFFF;
  text-align: center;
  line-height: 50px;
  font-size: 60px;
}

＆＃13;

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
</div>

＆＃13;

请注意，伪的实际高度为0px，背景黄色不会出现...

这些仅用于演示目的

编辑：FF处理最小高度来自最小高度的情况以及来自弹性基础的情况。但Chrome处理的只是一样。所以我之前的解决方案仅适用于Chrome。（不知道哪个是＆＃34;标准＆＃34;。

我更改了.child的最小高度并将其移动到flex-basis，现在它在Chrome和FF中都可以正常工作。

Answer 3

更新

好的，我终于明白为什么OP看到的一切都和我一样。我使用Chrome和OP正在使用Firefox。以下是与Chrome和Firefox兼容的最新演示。

主要更改包括将整个布局包装在flex-column容器中。
删除了margins: 10px;，因为带有box-sizing的flexbox无法按预期处理边距或边框。
使用了大量的最小和最大高度和宽度属性。
在列和行方向上使用了justify-content: space-between和align-items: space-between，这使得网格变得紧凑而灵活。

https://jsfiddle.net/zer00ne/fkczpggy/

.case {
  background: red;
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  align-items: space-around;
  margin: auto 0;
  max-width: 500px;
  overflow-y: auto;
}

.parent {
  background: red;
  height: 99vh;
  min-height: 100%;
  max-width: 500px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: space-between;
  flex: 0 1 auto;
  overflow-y: auto;
}

.child {
  background: blue;
  min-width: 130px;
  min-height: 130px;
  border: 1% solid transparent;
  color: #FFFFFF;
  height: auto;
  text-align: center;
  font-size: 60px;
  flex: 1 0 10%;
  margin: 1%;
}

.child:last-of-type {
  visibility: hidden;
}

 <section class="case">
  <div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
  </div>
</section>

<小时/> 的 OLD 这是一种懒惰但有效的方式：

已更新以反映div的动态变量数

使用 nth-of-type(n+9) 或者这会更好：的 last-of-type

添加第9个分区

然后将这一行添加到CSS：

.child:nth-of-type(n+9) { visibility: hidden; }

或

.child:last-of-type { visibility: hidden; }

https://jsfiddle.net/zer00ne/4fp88arh/

.parent { background: red; max-width: 500px; height: 400px; display: flex; flex-wrap: wrap; justify-content: flex-start; } /*.parent:after { content: ''; flex-grow: 1000000000; }*/ .child { background: blue; min-width: 130px; margin: 10px; flex-grow: 1; color: #FFFFFF; text-align: center; line-height: 50px; font-size: 60px; } /*.child:nth-of-type(n+9) { visibility: hidden; }*/ .child:last-of-type { visibility: hidden; }

<div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> <div class="child">6</div> <div class="child">7</div> <div class="child">8</div> <div class="child"></div> </div>

CSS flex最后一个不完整的行项占用完整行项的宽度

3 个答案:

更新