Flexbox：使用 flexbox 将页眉和页脚移动到侧边栏

Question

我的内容布局由三个部分组成：页眉、内容和页脚。对于小型设备，我想保持这个顺序，在桌面上我想将页眉和页脚移动到侧边栏。

使用浮点数实现：http://codepen.io/anon/pen/jqrZby

标记

<div class="page">
  <div class="top"></div>
  <div class="content"></div>
  <div class="bottom"></div>
</div>

CSS

.page {
  border: 2px solid black;
  padding: 1em;
}

.page:after {
  content: "";
  display: block;
  clear: both;
}

.page > * {
  margin-bottom: 1em;
}

.top {
  border: 2px solid red;
  height: 100px;
}

.content {
  border: 2px solid blue;
  height: 400px;
}

.bottom {
  border: 2px solid green;
  height: 200px;
}

@media screen and (min-width: 800px) {
  .content {
    width: 66%;
    float: left;
  }
  .top, .bottom {
    width: 33%;
    float: right;
  }
}

我正在尝试使用内容和侧边栏之间固定间距的 flexbox 找到解决方案。有人知道这是否可能吗？

Answer 1

在不改变结构和使用 flexbox 的情况下，您需要使用 flex-direction:column。

首先我们“mobile first”构建它，因为它遵循我们已经拥有的 div 结构的实际顺序。

然后，在适当的媒体查询中，我们需要使容器包装...通常这将需要一个固定的高度（无论是视口还是 px 值）...然后我们可以重新排序元素（使用，啊哼, order) 并施加我们所需的宽度。

Codepen Demo

* {
  box-sizing: border-box;
}
.page {
  border: 2px solid black;
  display: flex;
  flex-direction: column;
  height: 400px;
  padding: 1em;
}
.top {
  border: 2px solid red;
  height: 100px;
  width: 100%;
  order: 1;
  margin-bottom: 1em;
}
.content {
  border: 2px solid blue;
  height: 400px;
  order: 2;
}
.bottom {
  border: 2px solid green;
  height: 200px;
  order: 3;
  margin-top: 1em;
}
@media screen and (max-width: 800px) {
  .page {
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .top {
    order: 2;
  }
  .top,
  .bottom {
    width: 33%;
  }
  .content {
    order: 1;
    flex: 0 0 100%;
    width: 66%;
    margin-right: 1em;
  }
}

<div class="page">
  <div class="top">top</div>
  <div class="content">content</div>
  <div class="bottom">bottom</div>
</div>