兼容容器!!!!!
justify-content: 项目在主轴上的排列方式
flex-start(默认值) 居左 | flex-end 居右 | center居中 | space-between两端对齐
space-around 每个项目两侧的间隔相等 | space-evenly分散对齐(每个间隔都相等)
flex-direction: 主轴方向
row(默认值) 水平从左至右 | row-reverse 水平从右到左 | column 垂直从上到下 | column-rever 垂直从下到上
flex-wrap: 是否允许项目换行
nowrap(默认值) 不允许换行 | wrap 可以换行,第一行在上方 | wrap-reverse 可以换行,第一行在下方
align-items: 项目在交叉轴上的对齐方式
flex-start 项目在交叉轴起点 | flex-end 项目在交叉轴终点 | center 交叉轴居中 | baseline 第一行文字的基线对齐 | stretch(默认值) 项目没有设置高度,项目会沾满交叉轴
align-content: 只在存在多根主轴的时候有效,定义的是主轴在交叉轴上的分布方式
flex-start 交叉轴起点 | flex-end 交叉轴终点 | center 交叉轴的中间 | space-between 交叉轴两端 | space-around | 每根主轴两侧的间隔相等,分布 | space-evenly 分散对齐 | stretch 沾满交叉轴 默认值
兼容项目!!!
order: 项目的排列顺序,默认值都为0,值越小,越靠前
flex-grow: 是否允许项目放大
,默认值是0代表不允许放大;可取值是数值,如果取值为1或者大于1的数值,代表可以放大
flex-shrink: 是否允许项目缩小
默认值是1代表允许缩小
flex-basis: 项目占主轴空间
默认值是auto
flex: flex-grow flex-shrink flex-basis的简写
,默认值是0 1 auto 不允许放大,可以缩小,主轴空间自适应
有两个快捷值: auto(1 1 auto)和none(0 0 auto) ,也可以单独设置三个值