html - 具有多个侧边栏的 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%; }
}

注意:需要供应商前缀来支持早期版本的网络浏览器，例如 IE10 (但不像 IE9 一样旧!)。我用了Autoprefixer在 demo (感谢Codepen!)。如果您点击“切换编译 View ”，您将看到带有前缀的 CSS 声明版本。

您可能还想更改 @media 查询的断点以满足您的需要。

最后但同样重要的是，如果您不熟悉 CSS Flexible Box Layout您可以引用以下资源:

• http://dev.w3.org/csswg/css-flexbox (规范是你的 friend !)
• 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/