弹性布局,有主轴(x)和交叉轴(y)可改变,每个轴都有起点和终点,弹性元素永远沿着主轴,一个元素既可以是弹性元素也可以是弹性容器
flex-direction 控制项目排序
横向正123(row),横向反321(row-reverse)
纵向从上到下(column),纵向从下到上(column-reverse)
flex-wrap 控制主轴元素换行,不换行,反换行
不换行(nowrap),换行(wrap),换行但第一行会紧贴底部(wrap-reverse)
justify-content 控制元素在主轴的对齐方式
左对齐(flex-start),右对齐(flex-end),居中对齐(center),两端对齐贴两侧(space-between),两端对齐不贴两侧(space-around),(space-evenly)平衡分配剩余空间不贴两边
align-items 控制元素在交叉轴的对齐方式
贴在顶部(flex-start),贴在底部(flex-end),居中(center)
flex-grow 在有空间时是否放大,默认不放大 有固定值也会触发
0不放大(默认),1放大,2放的是1的两倍大
flex-shrink 空间不足时是否缩小 有固定值也会触发
1缩小(默认),值为0即使空间不够也不缩小