2021-05-09 flex布局

传统布局和flex布局对比

传统布局

兼容性好

布局繁琐

局限性，不能再移动端很好的布局

flex布局

操作方便，布局极其简单，移动端使用比较广泛

pc端浏览器支持情况比较差

IE11或更低版本不支持flex或仅支持部分

语法: display : flex

父项常见属性

flex-direction：设置主轴的方向 

  row (默认左到右)    row-reverse（右到左）          column（上到下）            column-reverse（下到上）

justify-content：设置主轴上的子元素排列方式

    flex-start（主轴是X轴，则从左到右） flex-end（从尾部开始排列） center（在主轴居中对齐）

space-around（平分剩余空间）    space-between（先两边贴边在平分剩余空间）

flex-wrap：设置子元素是否换行 

  nowrap （不换行）wrap （换行）

align-content：设置侧轴上的子元素的排列方式（多行）

   space-between（子项在侧轴先分布在两头，在平分剩余空间） stretch（设置子项元素高度平分父元素高度）

 flex-start（侧轴的头部开始排列） flex-end（在侧轴的尾部开始排列）center(在侧轴中间显示) space-around（子项在侧轴平分剩余空间）

align-items：设置侧轴上的子元素排列方式（单行）

 flex-start （从头部开始） flex-end （从尾部开始） center （居中显示） stretch （拉伸）

flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap