什么是flex？
- 页面元素弹性布局，当设置父元素display:flex后，内部的float、clear、vertical-align都会失效
- 可以为块级元素设置：display:flex；也可以为行内元素设置：display:inline-flex
- flex布局中的项目称为flex-item
- flex布局的水平方向的轴为主轴---main axis；垂直方向的轴为交叉轴--cross axis
- 主轴方向的起点为 main start，结束为main end ；垂直方向的起点为 cross start，结束为 cross end
父级容器的属性
flex-direction
容器的主轴方向，也就是项目的排列方向
- row : 水平方向，以左为起点
- row-reverse：水平方向，以右为起点
- column：垂直方向，以上为起点
- column-reverse：垂直方向，以下为起点
flex-wrap
当项目在一行排列不下时的换行方式
- nowrap：不换行，默认值
- wrap：换行，第一行在上
- wrap-reverse：换行，第一行在下
flex-flow
属性flex-direction和flex-wrap的简写，默认为 row nowrap
justify-content
项目在水平方向的对齐方式
- flex-start：靠左对齐，默认值
- flex-end：靠右对齐
- center：水平居中
- space-between：两端对齐，项目之间的间距相等
- space-around：项目两端的间距相等，项目与项目之间的距离是项目与边框之间的距离的两倍
align-items
项目在垂直方向的对齐方式
- flex-start：靠上对齐
- flex-end：靠下对齐
- center：垂直居中
- strech：默认值，如果项目没有设置高度，默认将占满整个容器的高度
- baseline：靠基线对齐
align-content
项目在多轴上的对齐方式
- flex-start
- flex-end
- center
- strech
- space-between
- space-around
项目的属性
order
项目的排列顺序，默认为0，数值越小，排列越靠前
flex-grow
项目放大的比例，默认为0，即当有剩余空间时，也不放大
flex-shrink
项目缩小的比例，默认为1，即当空间不足时，等比例缩放
flex-basis
项目在分配剩余空间之前，占据的空间，默认为auto，即其本身的大小
flex
属性flex-grow，flex-shrink，flex-basis的简写。
有两个默认值：
- auto（1, 1, auto）
align-self
指定某个项目对齐的特殊值，默认为auto，即继承父元素的align-items属性，如果没有父元素，等同于strech
auto，flex-start，flex-end，center，strech，space-between，space-around