具有多个侧边栏的Flexbox响应式布局 [英] Flexbox responsive layout with multiple sidebars

问题描述

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

最后我想把项目3变成第二个侧边栏。

手机

  | _container 1_ | 
 | _container 2_ | 
 | _container 3_ | 
 | ___侧栏___ | 
 | _container 4_ | 
  

桌面

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

大型桌面

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

解决方案

这是我尝试通过 Flexbox ，在下面的示例中调整输出面板的大小以查看效果：

示例

 < div class =wrapper> 
< div class =item container-1>容器1< / div> 
 
< div class =wrapper group> 
< div class =item container-2>容器2< / div> 
< div class =item container-3>容器3< / div> 
< / div> 
 
< aside class =item sidebar>侧栏< / aside> 
< div class =item container-4>容器4< / div> 
< / div> 
  

* {box-sizing ：边框; }

.wrapper {display：flex; flex-flow：排行; }
.item {text-align：center;填充：.3em; }
.group，.item {flex：1 100％; }
$ b / *中等设备* /
@media（min-width：768px）{
.item {flex：0 75％; }
.container-1 {order：-2; flex：1 auto; }
.sidebar {order：-1; flex：0 25％; }
}
$ b / *大型设备* /
@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％; }



注意：需要供应商前缀才能支持IE浏览器的早期版本，如IE10（但不像IE9！）。我在 Autoprefixer pen / wjHosrel =nofollow> demo （感谢 Codepen ！）。如果你点击Toggle Compiled View，你会看到CSS声明的前缀版本。

你可能也想更改 @media 查询的断点以满足您的需求。

最后但并非最不重要的是，如果您不熟悉使用 CSS灵活框布局，您可以参考以下资源：

• http：//dev.w3 .org / csswg / css-flexbox （规范是你的朋友！）
.org / zh-CN / docs / Web / Guide / CSS / Flexible_boxesrel =nofollow> https://developer.mozilla.org/zh-CN/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/

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_|             |         |

解决方案

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/

这篇关于具有多个侧边栏的Flexbox响应式布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！