Flex布局

flex布局原理

当我们把父盒子设为flex布局后，子元素的float、clear和vertical-align属性将失效。通过给父盒子添加flex属性，来控制子盒子的位置的排列方式。
Note: 一定是给父元素设置display：flex。亲爹地！！！

flex布局父项常见属性

• flex-direction:设置主轴的方向（主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。我们的子元素是跟着主轴来排列的）

  属性值	说明
  flex-direction:row	默认值从左到右
  flex-direction:row-reverse	从右到左
  flex-direction:column	默认值从上到下
  flex-direction:row	从下到上

• justify-content:设置主轴上子元素排列方式

  属性值	说明
  justify-content:row	默认值从左到右
  justify-content:row-reverse	从右到左
  justify-content:column	默认值从上到下
  justify-content:row	从下到上

  • 当有多个子元素时：

    属性值	说明
    justify-content:center	沿主轴居中排列
    justify-content:space-between	空白间距均匀分布在相邻盒子之间
    justify-content:sapce-evenly	弹性盒子与容器间的间距相等
    justify-content:space-around	空白间距均匀分布在盒子两侧
    justify-content:flex-start	起点开始依次排列
    justify-content:flex-end	终点开始依次排列

    
    

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

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

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

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