1
      
    
      
       2
      
    
      
       3
      
    
      
       4
      
    
      
       5
      
     
      
       6
      
     

#box{
           display: flex;        flex-direction: row;  /*一. flex-direction 决定主轴的对齐方向，分别有四个属性：        1.row（默认值）：主轴为水平方向，起点在左端。          2.row-reverse：主轴为水平方向，起点在右端。        3.column：主轴为垂直方向，起点在上沿。        4.column-reverse：主轴为垂直方向，起点在下沿。  */        width: 500px;        border: 1px solid red;        flex-wrap: wrap;   /*                             二.flex-wrap   子元素换行的方式  默认nowrap                             wrap：换行，正常的折行                              wrap-reverse  第二行在第一行上   */          flex-flow:row no-wrap;       /*                        三. flex-flow:是flex-direction 和flex-wrap的简写形式，默认是 row  nowrap               flex-flow：flex-direction|flex-wrap   */                    justify-content:center;                                  /*                      四.   justify-content  子元素子元素在主轴对齐方式  默认flex-start  左对齐                         flex-end：右对齐                       center： 居中                       space-between：两端对齐，项目之间的间隔都相等。                       space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。                       flex-start和flex-end，center这三个都比较简单，主要区分开下面的space-between和space-around；                       space-between：两端对齐，         */        align-items:center;        /*          */}.inner{
           width: 100px;        height: 100px;        background: #8a4182;        margin: 10px;        color:#fff;        text-align:center;        line-height:6;}