【发布时间】：2016-04-13 09:10:20
【问题描述】：
我正在寻找一种将多个项目彼此相邻对齐的方法，让它们在填满一行后自动换行，最后一个项目占据最后一行的剩余宽度。
我之前发现过多个关于类似主题的问题，解决方案通常使项目使用float: left 将它们对齐在一条线上，并在最后一个元素上使用overflow: hidden 使其自动占用剩余空间。这些解决方案在一行中运行良好，但是一旦在最后一个元素之前有足够的项目，它们就会停止工作，它们会包装成多行。然后，“最后一个”元素仍然呈现在第一行（如果有足够的空间），使其不再是最后一个元素。
但是，我希望最后一个元素始终保持最后一个元素，将它放在最后一行（无论是哪一行）并自动占用那里的剩余空间。
使用 wrapping flexbox 非常简单，因为您只需将 flex: 0 auto 放在前面的项目上，以使它们占据所需的任何空间（不占用更多空间），并将 flex: 1 放在要制作的最后一个元素上它占据了其余部分。 但是，我需要支持 Internet Explorer 9，所以很遗憾，flexbox 是不可能的。
情况是这样的。运行 sn-p 时，您可以使用“Toggle flex box”按钮来切换 flexbox 模式，以显示它应该的样子。
* { box-sizing: border-box; }
.container {
width: 300px;
background: snow;
padding: 5px;
overflow: auto;
}
.element {
float: left;
margin: 2px 5px 2px 0;
background: lavender;
}
.last {
overflow: hidden;
}
.last > input {
width: 100%;
}
/* Working solution with flex box */
.flex .container {
display: flex;
flex-wrap: wrap;
}
.flex .element {
flex: 0 auto;
}
.flex .last {
flex: 1;
}<div class="container">
<div class="element">Foo</div>
<div class="element">Foo bar</div>
<div class="element">Foo bar baz</div>
<div class="last"><input type="text" /></div>
</div>
<div class="container">
<div class="element">Foo</div>
<div class="element">Foo bar</div>
<div class="element">Foo bar baz</div>
<div class="element">Foo</div>
<div class="element">Foo bar</div>
<div class="element">Foo bar baz</div>
<div class="last"><input type="text" /></div>
</div>
<button onclick="this.parentNode.classList.toggle('flex')">Toggle flex box</button>【问题讨论】：
-
很好的问题，我之前没有尝试使用 css flex，所以我不知道在这种情况下使用 css。您是否考虑过手动计算剩余宽度并使用 js 修复具有该宽度的最后一项？
-
flexbox 解决方案只是为了展示它应该是什么样子（以及如何使用现代浏览器轻松解决这个问题），但由于我正在寻找没有 flexbox 的解决方案，你可以简单地忽略该解决方案。是的，用 JavaScript 解决它是我的后备解决方法，以防万一这被证明是无法解决的。
-
好吧，因为你仍然需要支持IE9，所以JS可能是一个更好的选择。但我会尝试解决这个问题，我记得我在某处看到它并仅使用 css 修复它
-
在你的情况下，我发现你没有自然地对待它，因为带有
class="last"的项目不是最后一个，所以强制它适合第一行可能会很棘手 -
@ThoVo 我不确定你的意思？我希望元素
.last（如果有帮助，可以放在代码中的任何位置）填满最后一行。尽管有多行，但它在第一行呈现正是我不想要的（但是这个解决方案正在发生什么）。