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。

首先我们建立它“移动优先”因为它遵循我们已经有的div结构的实际顺序。然后，在适当的媒体查询中，我们需要使容器包装...通常这需要固定的高度（无论是视口还是px值）...然后我们可以重新排序元素（使用， ahem，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>