上包裹

Question

我想，以達到以下佈局使用嵌套Flexbox的佈局時存在一定的空間改變屈曲方向空間中，右手側應換到一個行佈局代替柱佈局，從而使盒是並排側時它們包裹，例如：

這個想法是在左側內容的右側有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; 
} 

Answer 1

您可以使用媒體查詢來改變行爲

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

    section { 
     flex: 1; 
    } 
} 

見更新小提琴 - http://jsfiddle.net/shurshilin/usLxshro/1/

希望它會幫助你。