13

我有一个带有flex-wrap: wrapand的弹性容器，align-items: stretch因此当容器被调整大小直到下一个孩子适合时，孩子们会被拉伸。

问题通常是最后一行的元素比前几行少，孩子们被拉伸太多（所有的盒子在每种情况下都应该看起来一样）。除了在容器末端创建一堆空盒子之外，我还能如何防止这种情况发生？

body {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: stretch;
    align-items: stretch;
}
.child {
    height: 50px;
    margin: 10px;
    -webkit-flex: 1 1 50px;
    flex: 1 1 50px;
    background-color: red;
    border: 1px solid black;
}
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>

JSFiddle 在这里：http: //jsfiddle.net/m_gol/B3wLG/2/

4

5 回答 5

5

到目前为止，我发现的唯一解决方案是以编程方式添加一些空子元素来组成一个完整的行 - 添加比行更多的元素是可以的，这样它们就会溢出（因为它们是空的）。

于 2016-01-21T11:05:20.757 回答
5

最简单的方法是从最后一项中删除 flex：

.flex-item:last-child{
  flex-grow: 0;
}

或者给它一小部分的增长，所以它看起来也不会太少（特别是如果其他所有东西都增长了一点）

.flex-item:last-child{
  flex-grow: 0.1;
}

如果这些都不起作用，添加一个空的 div 作为你的最后一项，并给它一个更大的增长——同时隐藏任何边框和背景，并给它一个零高度，这样它就不会占用另一行

.flex-item:last-child{
  background: none;
  border: none;
  height: 0px;
  flex-grow: 100;
}
于 2016-08-22T03:13:14.217 回答
3

如果您只是希望最后一项不拉伸，则可以通过向容器添加一些 css 来保持简单的解决方案：

body:after {
    content: "";
    flex: 99999 1 auto;
}

这可以防止最后一行中的项目完全拉伸，但在您的情况下，您可能希望最后一个项目与前几行一样拉伸。为此，您必须在容器末尾添加许多大小相同的假元素。

看到这个调整过的小提琴。您将需要至少与您认为常规行将包含的一样多的假元素。一旦你用完假元素来填充最后一行，这些项目就会开始拉伸。

容器末端的虚假元素

于 2019-07-02T08:30:13.223 回答
0

为您的 flex 使用百分比，然后设置最大和最小宽度，如下所示：

.child {
    height: 50px;
    margin: 10px;
    flex: 0 0 10%;
    min-width: 100px;
    max-width: 150px;
    background-color: red;
    border: 1px solid black;
}
于 2021-06-29T20:58:25.650 回答
-1

我认为您必须让我们 JS 检查最后 qty N 个子元素的宽度是否与第一个元素的宽度匹配。对于每个不匹配的元素，将其取消弯曲 ( flex: none)，然后将其宽度设置为与第一个元素的宽度匹配。

我为它编写了一个小脚本。不幸的是，您必须将类添加smoothFlex到父类才能使其工作；或者您可以使用其他选择器。

我不知道用 style 选择所有元素的快速方法display: flex。

否则，以下脚本将完全按照我的预期工作。

var RESIZE_DELAY = 120,
    FLEX_SELECTOR_STRING = '.smoothFlex',
    resizeTimeout = undefined;
$(window).on('resize.smoothFlex',function(){
    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(function(){
        $(FLEX_SELECTOR_STRING).each(function(){
            var firstChildW = Math.floor($(this).children().first().width());
            $($(this).children(':gt(0)').get().reverse()).each(function(){
                if($(this).width()==firstChildW) return false;
                else $(this).css({
                    flex : "none",
                    width : firstChildW + "px",
                });
            })
        });
    }, RESIZE_DELAY);
});

IMO，flexbox 标准应该有一个本机选项 - 如果父级被包装，则应该是默认值。

资料来源：

于 2014-03-21T19:54:57.527 回答