CSS Flexbox
介绍
Flexbox是css3引入的新的布局方式，通过这种布局方式，可以很轻松地将多个元素以不同的方向或顺序进行对齐、排列。
Flexbox的主要思想是赋予容器的子元素扩展和收缩的能力，以最大化利用可使用的空间。
Flexbox一定程度上取代了浮动布局，并且代码的可读性和逻辑性也更好。
使用
要实现flex布局很简单，给一个容器赋予属性：display:flex，该容器就成为了一个flex容器，flex容器的直接子元素则会自动成为flex项目（flex items）。项目在容器内的排列方向称为主轴（main axis），而交叉轴（cross axis）则总是垂直于主轴。
属性
我们将flex布局的属性分为两大类：容器属性和项目属性。顾名思义，容器属性是属于元素的display属性为flex的元素，项目属性是flex项目的属性。
为了方便演示，以下属性会结合图片进行解释，我们先设计这样一个flex容器以及项目：
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
.container {
background-color: #ccc;
padding: 10px;
display: flex;
}
.item {
background-color: #f1425d;
padding: 30px;
margin: 30px;
color: #FFFFFF;
font-size: 40px;
}
由于属性默认值的原因，在我们将容器设为flex的时候，项目就已经获取了项目属性的默认值，所以会如图所示排列。
容器属性
flex-direction
该属性定义了主轴的方向。
可选值有：
- row: 默认值，主轴的方向为从左向右
- row-reverse: 主轴的方向为从右向左
- column: 主轴的方向从上到下
- column-reverse: 主轴的方向为从下到上
如图，我们通过改变flex-direction的值改变了主轴的方向，因此各个项目的排列方式均发生了变化。其实项目的位置也同时受到了justify-content的默认值flex-start的影响，所以每个项目都总是在主轴的起点上对齐。
flex-wrap
该属性定义在容器空间不足的时候，项目是否自动换行。
可选值有
- nowrap: 默认值，不换行
- wrap: 换行，方向为从上到下
- wrap-reverse: 换行，方向为从下到上
justify-content
该属性定义项目在主轴上应该如何对齐
可选值有
- flex-start: 默认值，项目在主轴的起点对其
- flex-end: 项目在主轴的终点对齐
- center: 项目在主轴的中心对齐
- space-between: 将容器的剩余空间平均分布在项目与项目之间
- space-around: 将容器的剩余空间分配在每个项目的左右两边
- space-evenly: 让项目之间以及第一个项目的左边和最后一个项目的右边的空间相同
align-items
定义项目在交叉轴上如何对齐
- stretch: 默认值，项目在交叉轴上延伸
- flex-start: 项目在交叉轴的起点对齐
- flex-end: 项目在交叉轴的终点对齐
- center: 项目在交叉轴的中心对齐
- baseline: 项目基于交叉轴的基线对齐
align-content
该属性在项目多于一行的话才起作用，定义这些行在有剩余空间的情况下在交叉轴上如何对齐。
- stretch
- flex-start
- flex-end
- center
- space-between
- space-around
项目属性
align-self
定义项目在交叉轴上的对齐方式
- auto
- stretch
- flex-start
- flex-end
- center
- baseline
order: <integer>
默认值0，定义该项目相对于其他项目的摆放顺序，默认值为0，拥有较小值order属性的项目将放在较大值的前面。
flex-grow: <interger>
默认值0，定义项目占据剩余空间的能力。
flex-shrink: <integer>
默认值1,定义项目在剩余空间不足时的收缩能力。
flex-basis: <length>
默认值auto，项目的宽度
