具有多个侧边栏的Flexbox响应式布局

Question

有没有什么方法可以使用flexbox拥有5个元素，其中4个是容器宽度为75%，然后是4号是25%，并显示为侧栏？

最终我想把项目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_|    |   | 

Answer 1

这是我尝试通过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，你可以参考以下资源：

• http://dev.w3.org/csswg/css-flexbox（该规范是你的朋友！）
• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
• http://www.html5rocks.com/en/tutorials/flexbox/quick/
• http://css-tricks.com/snippets/css/a-guide-to-flexbox/
• http://weblog.bocoup.com/dive-into-flexbox/