具有多個側邊欄的Flexbox響應式佈局

有沒有什麼方法可以使用flexbox擁有5個元素，其中4個是容器寬度爲75%，然後是4號是25%，並顯示爲側欄？具有多個側邊欄的Flexbox響應式佈局

最終我想把項目3變成第二個邊欄。

移動

|_container 1_| 
|_container 2_| 
|_container 3_| 
|___sidebar___| 
|_container 4_|

桌面

|_container 1_|_sidebar_| 
|_container 2_|   | 
|_container 3_|   | 
|_container 4_|   |

大型桌面

|_container 1_|_container 4_|_sidebar_| 
|_container 2_|    |   | 
|_container 3_|    |   |

來源

2014-08-31 zebapy

我確定有，但是SO指導方針建議您先嚐試一下，我們可以協助您解決任何您無法完成的任務。嘗試製作一個[**示例**]（http://stackoverflow.com/help/mcve） – 2014-08-31 17:40:28

這是我嘗試通過Flexbox實現了佈局，在下面的例子中調整輸出面板看效果：

EXAMPLE HERE

<div class="wrapper"> 
    <div class="item container-1">Container 1</div> 

    <div class="wrapper group"> 
    <div class="item container-2">Container 2</div> 
    <div class="item container-3">Container 3</div> 
    </div> 

    <aside class="item sidebar">Sidebar</aside> 
    <div class="item container-4">Container 4</div> 
</div>

* { box-sizing: border-box; } 

.wrapper { display: flex; flex-flow: row wrap; } 
.item { text-align: center; padding: .3em; } 
.group, .item { flex: 1 100%; } 

/* Medium devices */ 
@media (min-width: 768px) { 
    .item { flex: 0 75%; } 
    .container-1 { order: -2; flex: 1 auto; } 
    .sidebar { order: -1; flex: 0 25%; } 
} 

/* Large devices */ 
@media (min-width: 992px) { 
    .item { flex: 1 50%; } 
    .container-1 { order: -3; flex: 1 auto; } 
    .container-4 { order: -2; flex: 0 25%; } 
    .sidebar { order: -1; flex: 0 25%; } 
    .group { flex: 0 50%; } 
}

注：需要供應商前綴支持早期版本的web瀏覽器，如IE10 （但不一樣古老IE9！）。我在demo（感謝Codepen！）中使用了Autoprefixer！如果您點擊「切換編譯視圖」，您將看到CSS聲明的前綴版本。

您可能還想要更改@media查詢的斷點以符合您的需求。

最後但並非最不重要的，如果你不熟悉CSS Flexible Box Layout，你可以參考以下資源：

來源

2014-08-31 20:44:08

側邊欄可以做成全高？ – Noah 2015-12-06 10:18:10

具有多個側邊欄的Flexbox響應式佈局

回答

相關問題