html - Flexbox:使用 Flexbox 将页眉和页脚移动到侧边栏

Question

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

使用 float 实现: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。

首先我们构建它是“移动优先”，因为它遵循我们已有的 div 结构的实际顺序。

然后，在适当的媒体查询中，我们需要使容器包裹起来……通常这需要一个固定的高度(无论是视口(viewport)还是 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>