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;
}

/**未完，待续*/