容器的属性
1.flex-direction 决定主轴的方向
row 水平方向(默认)
column 垂直方向
2.flex-wrap 超出部分是否换行
nowrap 不换行 ,子元素会被压缩
wrap 换行
wrap-reverse 反向换行,下面的内容
3.flex-flow 简写
flex-flow是flex-direction和flex-wrap的简写
flex-flow:row nowrap
4.justify-content 容器在主轴上面的对齐方式
flex-start 向右边对齐
flex-end 向左边对齐
center 居中
space-between 左右靠边,剩下的平均分布
space-around 子元素间距相等,两两之间的子元素间距会多一倍
space-evenly 均等排列,两两之间的子元素间距都相等
5.align-items 容器在交叉轴上面的排列方式
flex-start 向右边对齐
flex-end 向左边对齐
center 居中
baseline 项目第一行文字的基线对齐
stretch 如果项目未设置高度或者auto,将占满真个容器的高度
6.flex-content 元素超出一行之后的排列方式
flex-start 向右边对齐
flex-end 向左边对齐
center 居中
space-between 左右靠边,剩下的平均分布
space-around 子元素间距相等,两两之间的子元素间距会多一倍
space-evenly 均等排列,两两之间的子元素间距都相等
.
子元素的属性
1.flex-grow 伸展
子元素会按照比例来分配剩余空间
2.flex-shirk 收缩
当空间不足时,子元素会按照比例进行相应的收缩
3.order 子元素的排列顺序
order的值越大,就排列顺序越靠后
order的值默认为0,且order的值可以为负数
4.item-selfs 单个子元素的对齐方式
flex-start 靠近起始位置
flex-end 靠近结束位置
center 居中
baseline 项目第一行文字的基线对齐
stretch 如果项目未设置高度或者auto,将占满真个容器的高度
推荐文章阮一飞的详细教程http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html