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！）。如果单击“Toggle Compiled View”，您将看到CSS声明的前缀版本。

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

最后但并非最不重要的是，如果您不熟悉CSS Flexible Box Layout，可以参考以下资源：

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

1 个答案: