Flexbox的页眉页脚侧边栏

Question

我们怎样才能像这样利用Flexbox的？

Answer 1

如果您了解我的这个例子，那么您就了解了有关flexbox的最重要的事情。这是HTML标记

<div class="main"> 
<div class="sidebar firestarter">sidebar</div> 
<div class="extraWrap"> 
<div class="header firestarter"> 
    <p><b>header</b> 
</div> 
<div class="xyz firestarter" id="x"> 
    <p> 
    this your red div 
    </p> 
</div> 
<div class="x firestarter" <p> 
    this your grey div 
    </p> 
</div> 
<div class="footer firestarter"> 
    <p><b>footer</b> (fixed height)</p> 
</div> 
</div> 


</div> 

下面的链接笔，在那里你可以检查CSS和玩的值： http://codepen.io/damianocel/pen/XmxmQE

我已经添加悬停动画向所有部分。

这将是敏感，很容易被修改，以任何其他布局的移动设备，但不依赖于Flexbox的跨浏览器，实用性极不理想很多。