总结flex布局原理：

就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

常见父项属性

• flex-direction 设置主轴的方向
  默认主轴方向就是 x 轴方向，水平向右
  默认侧轴方向就是 y
  row 默认值从左到右；row-reverse 从右到左；column 从上到下；column-reverse 从下到上

• justify-content 设置主轴上的子元素排列方式
  flex-start 默认值 从头部开始 如果主轴是x轴，则从左到右
  flex-end 从尾部开始排列
  center 在主轴居中对齐（如果主轴是x轴则 水平居中）
  space-around 平分剩余空间
  space-between 先两边贴边 再平分剩余空间（重要）

• flex-wrap 设置子元素是否换行
  nowrap 默认值，不换行；wrap 换行