Flex 佈局

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html，阮一峯老師的這篇博客很清楚的講解了flex佈局的概念和語法

這篇博文主要對我關心的和遇到的常見的一些佈局進行彙總，固然是經過flex佈局實現，不過也不排除討論一些其餘實現方式。因此這篇博文儘可能會長期更新

熟練掌握flex佈局的概念及相關屬性，合理組合使用，幾乎沒有實現不了的佈局。。。

• 聖盃佈局: 佈滿全屏，header和footer固定高度，content高度自適應。content左右邊固定寬度，content中間自適應寬度。

　　由聖盃佈局能夠觸類旁通，例如一些要求中間自適應，兩邊固定的三列布局；又有中間固定，兩邊自適應的三列布局等等

　　對於這些佈局，通用思想相似於將自適應的元素flex設爲1，固定的flex設爲固定寬度

<div class="container-box">
    <header>here is header</header>
    <div class="container-box-content">
        <nav class="content-left">here is content left</nav>
　　　　 <main class="content-center">here is content center</main>
 　　　　<aside class="content-right">here is content right</aside>   
　　</div>
 <footer>here is footer</footer>
</div>

.container-box {
  display: flex;
  flex-direction: column;
  min-height: 100vh;              
}
header,footer {
  flex: 0 0 100px;  
}
.container-box-content {
  flex: 1;
  display: flex;    
}
.content-center {
  flex: 1;  
}
.content-left,.content-right {
  flex: 0 0 150px;  
}

/**使用flex進行佈局，會簡單不少，首先考慮佈局結構，順序的問題，其次考慮自適應高寬或者固定高寬*/

• 水平垂直居中佈局

<div class="center-item">here is center item</div>

body {
  display: flex;  
　justify-content: center;
　align-items: center;
　min-height: 100vh;
}

/**未完，待續*/