Flexbox创建网站布局
基础网页布局
在flexbox之前，如果不使用hack，这种布局很难实现。开发人员通常不得不添加额外的标记，增加负边距以及一些其他的属性来使所有内容正确排列，而不管内容的数量多少或者屏幕大小多少。
而Flexbox是创建常用网站布局的理想选择，例如三列:
结构：
<!-- 1.1 -->
<header>Header</header>
<div id="main">
<article>Article</article>
<nav>Nav</nav>
<aside>Aside</aside>
</div>
<footer>Footer</footer>
样式：
/* 1.2 */
* {
box-sizing: border-box;
}
html,body{
margin: 0;
}
#main{
display: flex;
min-height: calc(100vh - 40vh);
}
#main > article {
flex: 1;
}
#main > nav, #main > aside {
flex: 0 0 20vw;
background: beige;
}
#main > nav {
order : -1;
}
header, footer, article, nav, aside{
padding: 1em;
}
header, footer{
background: yellowgreen;
height: 20vh;
}
结果：
首先，将#main元素设置为flex容器，并将header和footer设置为块元素。也就是说，只有中间是flexbox。
将min-height属性的值通过calc()函数计算得到。我们只需要将主区域设置为视口高度的100％，减去header和footer（每个都是20vh）的高度。这保证了即使内容不多的情况下布局依然能够占据屏幕的整个高度。如果内容没有占满整个屏幕高度，footer将永远不会在下面留下空白的空间。
注意：
min-height之所以使用box-sizing: border-box为了好计算。不然我们还需要再减去padding。
flex属性是flex-grow（扩展率），flex-shrink（收缩率）和flex-basis（最小固定值）属性的简写形式。
单值：只设置flex-grow属性。
对值：无单位设置flex-shrink，有单位设置flex-basis。
如果想在整个页面上使用flexbox，可以使用嵌套的柔性容器来实现。
Flexbox嵌套
Flexbox本质上是一维布局模型。弹性容器内的弹性子级可以水平或垂直设置，但不能同时设置。如果想要在两个维度中布局，则需要在另一个维度中嵌套弹性容器：
结构：
<!-- 1.1 -->
<div class="container">
<div class="red">1
<div class="green">1a</div>
<div class="blue">1b</div>
</div>
<div class="green">2</div>
<div class="blue">2</div>
</div>
样式：
/* 1.2 */
html,body{
margin: 0;
padding: 0;
}
.container{
display: flex;
}
.red{
background-color: orangered;
display: flex;
flex-direction: column;
}
.green{
background-color: yellowgreen;
}
.blue{
background-color: steelblue;
}
.container div{
font-size: 5vw;
padding: .5em;
color: white;
flex: 1;
}
结果：
在外层和红色子级div容器上使用display: flex。如果我们在红色div容器上使用flex-direction: column会导致其垂直堆叠。flex-directionis的默认值是row，所以我们不用为最外层容器设置flex-directionis属性。
二维（嵌套）Flexbox网页布局
之前的三列布局中我们只在中间部分使用了flexbox。header和footer仍然是块元素。换句话说，我们的Flexbox是一维布局。尽管整个页面实际上是一个二维布局，但弹性盒部分仅提供了一个维度的布局。
二维布局应该是这样的：
垂直纬度的布局由header，#main和footer组成。可以将整个页面视为一大列。
水平纬度的布局由nav，article和aside组成。设置第二行成为弹性容器：
结构：
<!-- 1.1 -->
<header>header</header>
<div id="main">
<article>article</article>
<nav>nav</nav>
<aside>aside</aside>
</div>
<footer>footer</footer>
样式：
/* 1.2 */
*{
box-sizing: border-box;
}
body{
display: flex;
min-height: 100vh;
flex-direction: column;
margin: 0;
}
#main{
display: flex;
flex: 1;
}
#main > article{
flex: 1;
}
#main > nav, #main > aside{
flex: 0 0 20vw;
background-color: beige;
}
#main > nav{
order: -1;
}
header, footer{
background-color: yellowgreen;
height: 20vh;
}
header,footer,article,nav,aside{
padding: 1em;
}
结果：
嵌套Flexbox vs Grid
当你使用嵌套flexbox布局时，也许会想到可以使用网格布局。网格布局是为二维布局构建的，不需要嵌套来实现这种布局（尽管网格支持嵌套）。但是，仍然有许多布局更适合于flexbox，因此这只是一个简单的例子。
我相信你可以想到嵌套Flexbox布局的更多其他用途，而不仅仅是网站布局。
code enjoy! ʕ•ᴥ•ʔ
作者：indeex
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。