小编Xia*_*ous的帖子

嵌套弹性盒不扩展

我正在尝试创建一个双列布局,其中第二列也是一个网格,其中有两个单元格。然而,嵌套网格中的两个单元格不会扩展以填充其容器。

我多么想要它: 我多么想要它

怎么样: 怎么样

当我设置.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> …
Run Code Online (Sandbox Code Playgroud)

html css flexbox

1
推荐指数
1
解决办法
4059
查看次数

标签 统计

css ×1

flexbox ×1

html ×1