小编Jer*_*emy的帖子

我正在寻找一种方法来创建同样大小的盒子flexbox同时使用flex-growth: 1.通过使用以下内容定义父项,这非常有用:

display: flex;
flex-flow: row-wrap;

及其子女:

flex: 1 0 10rem;

但是,与前一行中的框相比,LAST行将(取决于该行中的块数)具有不同的框宽度.有没有办法解决这个问题,同时仍然使用flex-grow？

HTML

<section>
    <div>aaaaaaaaaaaaaaaaaaaa</div>
    <div>bbbbbbbbbbbbbbbbbbbb</div>
    <div>cccccccccccccccccccc</div>
    <div>dddddddddddddddddddd</div>
    <div>eeeeeeeeeeeeeeeeeeee</div>
    <div>ffffffffffffffffffff</div>
    <div>gggggggggggggggggggg</div>
</section>

CSS

section {
    display: flex;
    flex-flow: row wrap;
    background-color: blue;
    width: 700px;
}

div {
    background-color: red;
    height: 100px;
    flex: 1 0 200px;
}

div:nth-child(even) {
    background-color: green;
}

请注意http://jsfiddle.net/C2q8D/3/中最后一行中的弹性项目大于上面的行(因为该行上的项目用于划分空间的数量较少).

当使用列换行作为弹性流时，它似乎会对 chrome 中的容器尺寸造成问题。

HTML 示例：

<div class="root">
    <div class="outer">
        <div class="inner">A</div>
        <div class="inner">B</div>
        <div class="inner">C</div>
        <div class="inner">D</div>
        <div class="inner">E</div>
        <div class="inner">F</div>
        <div class="inner">G</div>
        <div class="inner">H</div>
        <div class="inner">I</div>
        <div class="inner">J</div>
    </div>
</div>

CSS: 正文{ 边距: 0; 填充：0；}

    .root{
        display: flex;
    }

    .outer{
        background-color: red;
        display: flex;
        flex-flow: column wrap;
        align-content: flex-start;
        flex: 1 0 auto;
        max-height: 400px;
    }

    .inner{
        background-color: violet;
        border: 1px solid black;
        height: 100px;
        width: 100px;
        flex: 1 0 auto;
        color: white;
        text-align: center;
        font-size: 50px;
    }

为什么 …