flex layout

弹性布局，即flex布局，是一种能够让页面元素根据容器尺寸变化而自动调整的布局方式。该布局模式的引入主要是为了解决传统浮动布局所带来的问题，当子元素应用浮动时，若父元素未设定高度，则可能导致页面结构出现塌陷现象，此时需要通过清除浮动来修复。然而，flex布局在兼容性方面存在一定的局限性，无法支持较早期版本的浏览器。

1.容器的属性

1.1 flex-direction

确定主轴的方位

    .box {
      flex-direction: row | row-reverse | column | column-reverse;
    }
    
    
      
      
      
    

row： 默认设置下，主轴方向为水平，元素按照从左至右的顺序进行排列
row-reverse： 主轴方向保持水平，但元素排列顺序调整为从右向左
column： 主轴方向转为垂直，元素按从上至下的顺序依次排列
column-reverse： 主轴方向设定为垂直，元素排列方式则变为从下至上的顺序

1.2 flex-wrap

是否换行

    .box{
      flex-wrap: nowrap | wrap | wrap-reverse;
    }