嵌套的flexbox不扩展 [英] Nested flexbox not expanding

问题描述

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

我是怎么想的：

这是怎么回事：

当我将 .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.pngalt =text>< div class =flexcenter>< a href =link>文字< / a>< / div> ; 
< / div> 
< div class =header-cell4> 
< img src =image.pngalt =text>< div class =flexcenter>< a href =link>文字< / a>< / div> ; 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
  

解决方案

你的问题是， code> header-cell4 来增长。您可以使用弹性快捷方式来做到这一点： 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; 
 
 $ / code> 

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.pngalt =text> 
< div class =flexcenter> 
< a href =link>文字< / a> 
< / div> 
< / div> 
< div class =header-cell4> 
< img src =image.pngalt =text> 
< div class =flexcenter> 
< a href =link>文字< / a> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
  

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

下次您发布信息时，请提供您实际工作的CSS代码，而不是像 .header-cell3and4 之类的东西。我花了一些时间来重现你的问题。

I am trying to create a dual column layout where the second column is also a grid with two cells inside of it. However the two cells in the nested grid are not expanding to fill their container.

How I'd like it:

How it is:

When I set .header-cell3and4 to have flex: 1 instead of display: flex it messes up the positioning of my images inside the cell.

.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>

解决方案

Your problem was, that you didn't tell header-cell4 to grow. You can do that with the flex-shortcut: flex: 1 0 auto (whereas the first value is flex-grow, the second value is flex-shrink and the third value is flex-basis).

If you want to learn more about flexbox, I recommend the css-tricks flexbox guide.

Here is the working code:

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/

And please next time you post, give us your actually working CSS code, and not stuff like .header-cell3and4. It took me some time just to reproduce your problem.

这篇关于嵌套的flexbox不扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！