responsiveflex佈局包裝問題

我有一個問題有一個特殊的響應柔性佈局。
我的目標：responsiveflex佈局包裝問題

容器2可以有一個靜態的。
我已經測試了幾個可能的解決方案：對對對桌面容器2桌面

組絕對位置

浮動容器2。

是否有不使用浮動或絕對定位的更靈活的解決方案？

來源

2017-02-28 Alex

其中都試過代碼?? –

僅供參考，柔性標籤是爲Flash問題（Adobe Flex的）。對於CSS問題使用「flexbox」。 – Brian

你可以用Flexbox做到這一點，如果你有你的容器元素上固定的高度。然後你只需要改變媒體查詢元素的順序。

.content { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100vh; 
 
    flex-wrap: wrap; 
 
} 
 
.a { 
 
    background: #2873FD; 
 
} 
 
.b { 
 
    background: #C015FF; 
 
} 
 
.c { 
 
    background: #15FF78; 
 
} 
 
@media(min-width: 480px) { 
 
    .a, .c { 
 
    order: 1; 
 
    flex: 0 0 30%; 
 
    } 
 
    .b { 
 
    order: 2; 
 
    flex: 0 0 100%; 
 
    } 
 
} 
 

 
@media(max-width: 480px) { 
 
    .content > div { 
 
    flex: 1; 
 
    } 
 
}

<div class="content"> 
 
    <div class="a">1</div> 
 
    <div class="b">2</div> 
 
    <div class="c">3</div> 
 
</div>

來源

2017-02-28 11:01:59

謝謝，我想這將做到這一點 – Alex

responsiveflex佈局包裝問題

回答

相關問題