弹性盒子布局flex

开启flex属性布局

display: flex;

换行

    flex-wrap: wrap; //正常换行

主轴排列方向：flex-direction

        flex-direction
          值：row            主轴为水平方向，起点在左端
              row-reverse    主轴为水平方向，起点在右端
              column         主轴为垂直方向，起点在上面
              column-reverse 主轴为处置方向，起点在下沿

内容排列：justfy-content属性

   justify-content 定义了项目在主轴上的对齐
            flex-start       左对齐
            flex-end         右对齐
            center           居中
            space-around     盒子两侧间隔相等
            space-between    两端对齐，中间间隔相等

align-item属性

// 它能取5个值。具体的对齐方式与交叉轴的方向有关
flex-start：交叉轴的起点对齐，垂直方向最上端。
flex-end： 交叉轴的终点对齐，垂直方向最下端。
center： 交叉轴的中点对齐，垂直方向中间。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

flex-wrap属性

// 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
flex-wrap:
      值：nowrap
          wrap
          wrap-reverse