flex布局语法总结

其实在布局中，我们想要让一个元素在水平轴上居左居右或居中是很容易实现的，但是在垂直轴上就不是那么轻易搞定了，相信你在布局的时候也会遇到这样的情况，想让一个盒子垂直居中显示，但又不能去设置line-height或者margin，padding等值问题的困扰。
W3C针对这一问题提出了flex布局这一方案。可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
浏览器支持版本：

任何一个容器都可以指定为flex布局

display: flex;
display；inline-flex;
display:-webkit-flex;//webkit内核的浏览器必须加上-webkit前缀

当这个盒子被指定为flex之后，该盒子下的所有子元素所设置的float、clear和vertical-align将会失去作用。盒子被设置flex后，该盒子就称为容器，它下面的子元素统称为项目。

容器的属性

flex-direction 决定 项目的排列方向
对应的值：

row(默认值):主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap 定义项目在一条线上排不下时的换行方式
对应的值：

nowrap 默认不换行
wrap 常规换行方式
123
456
wrap-reverse 与wrap相反
456
123

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 垂直居中
baseline 项目的第一行文字对齐
stretch 默认值 如果项目没有设置高度或者auto，项目的高度将充满整个容器

align-content 定义多根轴线的对齐方式，如果项目只有一根轴，该属性不起作用
所谓多根轴就是项目有多行，垂直方向上
对应的值：

flex-start 垂直轴的起点位置，也就是容器的顶部位置
flex-end 垂直轴的终点位置，也就是容器的底部位置
center 垂直居中
space-between 两端对齐，项目之间的间隔都相等
space-around 每个项目两侧的间隔相等，所以项目之间比项目与边框之间的间隔大一倍
stretch 默认值 轴线占满整个垂直轴

项目上的属性

order 定义项目的排列顺序，数值越小排列越靠前 默认值为0

flex-grow 定义项目的放大比列，默认值为0，即使容器存在剩余空间，也不放大
如果项目设置的放大比列都相同且不为0，那么如果容器存在剩余空间，它们将等分剩余空间，假如某一个项目为2，其它项目为1，则为2的项目所分得的空间比其它的大一倍。

flex-shrink 定义了项目的缩小比列，默认值为1，即若容器空间不足，项目将缩小
如果所有项目都设置为1，容器空间不足时，所有项目都等比例缩小；如果有一个项目设置为0，其它项目为1，容器空间不足时，为0的项目不缩小，其它项目缩小。

flex-basis 该属性定义了在分配多余空间之前，项目占据的主轴空间，默认值为auto，即项目本来大小
它可以像设置width,height一样设置一个数值 300px ，这样项目占据固定空间。

flex 该属性是flex-grow,flex-shrink以及flex-basis的简写形式，默认值为 0 1 auto
建议优先使用这个属性，而不是分开写

**align-self 该属性可以定义某一个单独的项目的对齐方式，可覆盖父元素的align-items属性，默认值为auto，表示继承父元素align-items属性，如果没有父元素，则等同于 stretch
对应的值：

auto 默认值
flex-start 垂直轴的起点位置，也就是容器的顶部位置
flex-end 垂直轴的终点位置，也就是容器的底部位置
center 垂直居中
baseline 项目的第一行文字对齐
stretch 默认值 如果项目没有设置高度或者auto，项目的高度将充满整个容器