flex
本文参考了 阮一峰的博客 《Flex 布局教程：语法篇》；
在往常项目中，作为一个前端选手，更多的布局是依赖于display，position，float，margin，padding等属性进行基础布局，但是自从w3c提出了一种全新的方案 flex 布局，并且得到了所有浏览器的支持，大大地解放了我们的双手。
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
采用flex布局的元素，成为flex容器，所有的子元素都是容器成员，成为flex项目。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置即和容器边框的交叉点为main start（主轴起始点），结束位置是main end；交叉轴的开始位置是cross start，结束位置是cross end；
一丶容器的属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction
.box {
flex-direction: row | row-reverse | column | column-reverse
}
flex-direction可能有四个值：
- row（默认值）：主轴是水平方向，起点在左端
- row-reverse ：主轴是水平方向，起点在右端
- columu：主轴是垂直方向，起点在上沿
- column-reverse：主轴是垂直方向，起点在下沿
flex-wrap
.box {
flex-wrap: nowrap | wrap | wrap-reverse
}
flex-wrap 可能存在三个值（注意，如果子项目设置flex：1，当前属性是不生效的）
- nowrap（默认值）：不换行
- wrap：换行，第一行在上方
- wrap-reverse：换行，第一行在下方
flex-flow
.box {
flex-flow: row nowrap
}
flex-flow是flex-direction和flex-wrap的简写，默认值是now和nowrap
justify-content
.box {
justify-content： flex-start | flex-end | center | space-between | space-around
}
justify-content可能存在五个值，主要定义在水平主轴上的对齐方式；
- flex-start（默认值）：主轴的起点对齐
- flex-end：主轴的尾端对齐
- center： 主轴的居中对齐
- space-between：两端对齐，每个子项目的间隔都是一样的
- space-around：每个子项目的两侧的间隔都是相等的，所以子项目之间的间隔比项目与边框的间隔大一倍
align-items
.box {
align-items: flex-start | flex-end | center | baseline | stretch
}
align-items可能存在五个取值，主要定义在交叉轴即垂直轴上的对齐方式：
- flex-start：交叉轴的起点对齐
- flex-end：交叉轴的尾端对齐
- center：交叉轴的居中对齐
- baseline：子项目汇总的第一行文字的基线对齐
- stretch （默认值）：如果子项目未设置高度或者设置为auto，将占满整个容器的高度
align-content
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
align-content定义了多根轴线的对齐方式，如果当前子项目只有一根轴线，那么该属性不起作用。
- flex-start：与交叉轴的起点对齐
- flex-end：与交叉轴的终点对齐
- center：与交叉轴的中点对齐
- space-between： 与交叉轴的两端对齐，轴线之间的间隔平均分布
- space-around： 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch（默认值）：轴线占满整个交叉轴
二丶项目的属性
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
order
order属性定义子项目的排列顺序，数值越小，排列越靠前，默认是0
.box-item {
order: 0
}
flex-grow
flex-grow属性定义项目的放大比例，默认是0，即如果存在剩余空间，也不放大。
.box-item {
flex-grow: 0
}
flex-shrink
flex-shrink 属性定义了项目的缩小比例，默认是1，即如果空间不足，该项目将缩小
.box-item {
flex-shrink: 1
}
flex-basic
flex-basic 定义了在分配多余空间之间，项目占据的主轴空间，浏览器会根据这个属性，计算主轴是否有多余的空间，它的默认值是0，就是项目本身的size;它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
.box-item {
flex-basic: 0 | auto
}
flex
flex属性是 flex-grow，flex-shrink，flex-basis的简写，默认值是 0 1 auto。后两个属性是可选。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
box-item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
align-self
align_self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items，默认值是auto，继承自父元素，如果没有父元素就等同于stretch
.box-item {
align-self： auto | flex-start | flex-end | center | baseline | stretch;
}
（完）
