嵌套的 flexbox 不扩展

Question

我正在尝试创建一个双列布局，其中第二列也是一个内部有两个单元格的网格。但是，嵌套网格中的两个单元格并未扩展以填充其容器。

我喜欢它：

情况如何：

当我将 .header-cell3and4 设置为 flex: 1 而不是 display: flex 时，它弄乱了我的图像在单元格内的定位。

.header-grid1 { display: flex; }
.header-cell1 { flex: 0 0 66.6666%; }
.header-cell2 { flex: 0 0 33.3333%; }
.header-grid2 { display: flex; flex-flow: column; align-self: flex-start; text-align: center; }
.header-cell3and4 { display: flex; justify-content: center; }


<div id="header">
    <div class="header-Grid1">
        <div class="header-cell1">
            <img src="image.png">
        </div>

        <div class="header-cell2">
            <div class="header-grid2">
                <div class="header-cell3">
                    <img src="image.png" alt="text"><div class="flexcenter"><a href="link">text</a></div>
                </div>
                <div class="header-cell4">
                    <img src="image.png" alt="text"><div class="flexcenter"><a href="link">text</a></div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

你的问题是，你没有告诉 header-cell4 成长。您可以使用 flex-shortcut 来做到这一点：flex: 1 0 auto（第一个值是 flex-grow，第二个值是 flex-shrink，第三个值是 flex-basis）。

如果你想了解更多关于 flexbox 的知识，我推荐css-tricks flexbox guide。

这是工作代码：

CSS

.header-grid1 {
    display: flex;
}
.header-cell1 {
    flex-wrap: wrap;
    display: flex;
    flex: 0 0 66.666%;
}
.header-cell2 {
    flex-wrap: wrap;
    flex: 0 0 33.333%;
    display: flex;
    flex-flow: column;
    text-align: center;
}

.header-cell3 {
    display: flex;
    justify-content: center;
    flex: 0 0 auto;
}
.header-cell4 {
    display: flex;
    justify-content: center;
    flex: 1 0 auto;
}

HTML

<div id="header">
    <div class="header-grid1">
        <div class="header-cell1">
            <img src="image.png">
        </div>
        <div class="header-cell2">
            <div class="header-cell3">
                <img src="image.png" alt="text">
                <div class="flexcenter">
                    <a href="link">text</a>
                </div>
            </div>
            <div class="header-cell4">
                <img src="image.png" alt="text">
                <div class="flexcenter">
                    <a href="link">text</a>
                </div>
            </div>
        </div>
    </div>
</div>

JSFiddle：http://jsfiddle.net/9gryLby6/2/

请您下次 post 给我们您实际工作的 CSS 代码，而不是像 .header-cell3and4 这样的东西。我花了一些时间才重现你的问题。

嵌套的 flexbox 不扩展

Nested flexbox not expanding

html

css

flexbox