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的跨瀏覽器，實用性極不理想很多。