更改包装的弯曲方向

编码阴谋

我正在尝试使用嵌套的flexbox布局，以便在有一定空间时实现以下布局：

然后，当没有足够的空间时，右侧应包装成行布局，而不是列布局，以便包装时它们并排排列，例如：

小布局

这个想法是让盒子在左边内容的右边50％，这样当它们包裹在下面时，它们的合并大小与左边内容相同。

但是，我无法弄清楚如何仅通过flexbox做到这一点。到目前为止，这就是我所拥有的，但是如果您调整窗口的大小，您会看到框保持相同的方向：

div {
    min-height: 50px;
    background: #E7E7E7;
    margin: 10px;
}
#wrapper {
    display: flex;
    flex-wrap: wrap;
}
#left-content {
    flex: 2;
    min-width: 200px;
}
#right-content {
    flex: 1;
    min-width: 200px;
}
section {
    border: 1px solid #333;
    margin: 10px;
}

德米特里·舒士林

您可以使用媒体查询来更改行为

@media (max-width: 500px) {
    #wrapper {
        flex-direction: column;    
    }
    #right-content {
        display: flex;
    }

    section {
        flex: 1;   
    }
}

查看更新的小提琴-http: //jsfiddle.net/shurshilin/usLxshro/1/

希望对您有帮助。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。