Flexbox responsive layout with multiple sidebars

问题

Is there any way with flexbox to have 5 elements, 4 of which are 75% container width, then item 4 is 25% and displays as sidebar?

Ultimately I want to take item 3 and turn it into a 2nd sidebar as well.

mobile

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

desktop

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

large desktop

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

回答1:

Here is my attempt to achieve the layout via Flexbox, in the example below resize the output panel to see the effect:

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%; }
}

Note: Vendor prefixes are needed to support earlier versions of web browsers such as IE10 (but not as old as IE9!). I used Autoprefixer in the demo (Thanks to Codepen!). If you click on "Toggle Compiled View", you'll see the prefixed version of CSS declarations.

You might also want to change the breakpoints of @media queries to fit your needs.

At last but not least, if you're not familiar with CSS Flexible Box Layout you could refer to the following resources:

• http://dev.w3.org/csswg/css-flexbox (The spec is your 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/

来源：https://stackoverflow.com/questions/25594384/flexbox-responsive-layout-with-multiple-sidebars