1容器的属性
flex-direction 调整主轴
row 横向向右排列
row-reverse 横向从右向左排列
column 调整为纵轴为主轴 从上往下
column-reverse 调整为纵轴为主轴 从下往上
flex-wrap 控制是否换行
nowrap 默认不换行
wrap 换行 会把副轴的空间等分
wrap-reverse 换行 反向
justify-content:主轴的排列顺序
flex-start 贴着左边开始
flex-end 贴着右边
center 项目居中
space-around 将剩余的空间等分 分别分给每一个项目走有两边
space-between 将剩余的空间等分 第一个项目和最后一个项目的紧挨着走有两边的
space-evenly 将剩余的空间等分 所有的项目间距相同 兼容性不太好
align-items 在副轴的排列顺序
flex-start 项目在副轴的flex-start的位置
flex-end 项目在副轴的flex-den的位置
center 项目在副轴的中间
stretch 如果项目在副轴上没有宽/高,那么宽度会变成100%
align-content: 换行项目的时候生效
flex-start 换行的项目紧挨着上面的元素,并且在副轴的flex-start的位置
flex-end 换行的项目紧挨着上面的元素,在副轴的flex-end的位置
center 换行的项目紧挨着上面的元素,在副轴的中间位置
space-around 将副轴的剩余空间等分,,添加到项目行的上下两边
space-between 将副轴的剩余空间等分,第一行和最后一行紧挨着容器的副轴两边
项目的属性
flex-grow 放大 将剩余的宽度
放大后的宽度:本身的宽度+剩余宽度/设置的grow的和*本身设置的grow值
如果没有剩余宽度,设置这个没有效果
flex-shrink 压缩
项目的宽度= 本身的宽度-超出的宽度/shrink的总值*本身设置的shrink值
如果一行的项目没有超出的宽度,设置这个没有效果
flex-basis 设置主轴上项目占的空间
将会替换掉项目本身在主轴上设置的长度
flex 符合属性
grow shirnk basis
默认值 flex: 0 1 auto;
flex:1
如果直接这样写,相当于设置的是flex-grow
align-self 项目本身在副轴的位置
flex-start 在副轴的flex-start
flex-end 早副轴的flex-end
center 在副轴的中间
order 排序
默认值为1
单独设置值 值越大越靠后