Question

我有一个整页的flexbox列容器，它本身包含：

一个“红色”列flexbox容器，有3个固定大小的盒子
一个“绿色”行flexbox容器，有5个固定大小的盒子

我希望这两个嵌套容器在窗口大小缩小时包装它们的内容。

当窗口水平收缩时，它适用于绿色行容器，但是我无法使其适用于红色容器（当垂直缩小尺寸时）。

HTML：

<div style="position:absolute;
            top:0px; left:0px; bottom:0px; right:0px;
            overflow:hidden;

            display:flex;
            justify-content:flex-start;
            align-items:stretch;
            flex-direction:column;
            flex-wrap: nowrap;">

<div style='flex:auto;
                background-color:rgba(255,0,0,0.2);
                display:flex;
                justify-content:space-between;
                align-items:stretch;
                flex-direction:column;
                flex-wrap: wrap;'>
    <div id='redBox' style="flex:none">Box 1</div>
    <div id='redBox' style="flex:none">Box 2</div>
    <div id='redBox' style="flex:none">Box 3</div>
</div>

<div style='flex:none;
                background-color:rgba(0,255,0,0.2);
                display:flex;
                justify-content:space-between;
                align-items:stretch;
                flex-direction:row;
                flex-wrap: wrap;'>
    <div id='greenBox' style="flex:none">Box 5</div>
    <div id='greenBox' style="flex:none">Box 6</div>
    <div id='greenBox' style="flex:none">Box 7</div>
    <div id='greenBox' style="flex:none">Box 8</div>
    <div id='greenBox' style="flex:none">Box 9</div>
</div>

CSS

#redBox {
    background-color: rgba(255, 0, 0, 0.2);
    width:100px;
    height:100px;
}
#greenBox {
    background-color: rgba(0, 255, 0, 0.2);
    width:100px;
    height:100px;
}

Answer 1

这是一个棘手的问题。显然，为了让flex: auto与flex-wrap一起使用，您需要在元素上添加height或min-height。

我不知道这是否符合规范，但似乎是这样的：

min-height: 100px确保红色容器永远不会比盒子小。外部容器上的height和max-height提供红色容器的增长/收缩上下文，但在此示例中不是必需的：

<div style="position:absolute;
        top:0px; left:0px; bottom:0px; right:0px;

        display:flex;
        justify-content:flex-start;
        align-items:start;
        flex-direction:column;
        flex-wrap: nowrap;
                max-height: 100%;
                height: 100%;">

    <div style='flex: 1 1 auto;background-color:rgba(255,0,0,0.2);
          display:flex;
          justify-content:space-between;
          align-items:stretch;
          flex-direction:column;
          flex-wrap: wrap;
          min-height: 100px;'> <!-- this is the magic -->
        <div id='redBox' style="flex:none">Box 1</div>
        <div id='redBox' style="flex:none">Box 2</div>
        <div id='redBox' style="flex:none">Box 3</div>
    </div>

    <div style='flex:none;background-color:rgba(0,255,0,0.2);
          display:flex;
          justify-content:space-between;
          align-items:stretch;
          flex-direction:row;
          flex-wrap: wrap;'>
        <div id='greenBox' style="flex:none">Box 5</div>
        <div id='greenBox' style="flex:none">Box 6</div>
        <div id='greenBox' style="flex:none">Box 7</div>
        <div id='greenBox' style="flex:none">Box 8</div>
        <div id='greenBox' style="flex:none">Box 9</div>
    </div>
</div>

http://jsfiddle.net/7ko3yfk2/1/

Flexbox包装在嵌套容器中

1 个答案: