浅谈浮动flex

  弹性布局,有主轴(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即使空间不够也不缩小

       原地址