改变包裹的弯曲方向

Posted 2023-03-06

【中文标题】改变包裹的弯曲方向

【英文标题】：Change flex direction on wrap

【发布时间】：2015-07-21 15:05:33

【问题描述】：

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

然后，当没有足够的空间时，右侧应该换成 row 布局而不是 column 布局，这样盒子就在旁边- 包装时并排，例如：

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

但是，我无法弄清楚如何仅通过 flexbox 执行此操作。这是我目前所拥有的，但是如果您调整窗口大小，您会看到这些框保持在同一方向：

http://jsfiddle.net/usLxshro/

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;

【问题讨论】：

简单的浮点数不会吗？ jsfiddle.net/f5kzn36d

@oserk 解决了左/右问题，但浮动是否给了我动态宽度？我需要明确说明左/右框的宽度吗？

如果你想使用 flexbox，媒体查询会是一个可行的选择吗？ jsfiddle.net/dh024mLz/1

你为什么把它作为评论发布@HiddenHobbes？只需将其发布为答案

@HiddenHobbes 你对一个星期一的早晨太有礼貌了！ :D

【参考方案1】：

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

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

    section 
        flex: 1;   
    

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

希望对你有帮助。

【讨论】：

确保@media 查询出现在初始定义之后。如果您在 css 文件中定义 #wrapper 比写入媒体查询的位置更远，它将覆盖它。