flex布局
display:flex; ———定义一个盒子为弹性盒子

• 操作方便，布局极其简单，移动端使用比较广泛
  
• pc端浏览器支持情况比较差
  
• IE11或更低版本不支持flex或仅支持部分

建议

• 如果是pc端页面布局，还是采用传统方式
  

• 如果是移动端或者是不考虑兼容的pc则采用flex
  

  flex布局原理

• flex 是 flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。
  

• 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
  
• flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局
  

• 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。
  

  父项常见属性

• flex-direction：设置主轴的方向
  

• justify-content：设置主轴上的子元素排列方式
  
• flex-wrap：设置子元素是否换行
  
• align-content：设置侧轴上的子元素的排列方式（多行）
  
• align-items：设置侧轴上的子元素排列方式（单行）
  

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

  弹性盒子flex-direction：设置主轴的方向

  需要先定义一个盒子为弹性盒子（display：flex）
  然后给弹性盒子 使用flex-direction排序方法
  
  flex-direction 有4个属性
  row————-row是默认值 使盒子横向从左边向右排序
  
  row-reverse————使盒子横向从右边向左排序
  
  column—————使盒子纵向从上往下排序
  
  column-reverse—————使盒子纵向从下往上排序
  

  flex-wrap(换行)

  定义单行或多行的弹性盒子布局可以与flex-direction配合一起使用调整
  flex-wrap 有2个属性值
  flex-wrap:nowrap—————多个小盒子宽度过大 碰到父盒子会自动平均每个小盒子的宽度
  
  flex-wrap:wrap——————-当多个小盒子的宽度不足，使用wrap就会自动切换下一行，下一行的上下边距均匀
  

  弹性盒子flex的对齐属性

  justify-content、align-items、align-content

  justify-content：设置主轴上的子元素排列方式

  justify-content 的5个值
  flex-start （默认值）从头部开始排列（如主轴是x轴，则从左往右）
  
  flex-end 从尾部开始排列（如果主轴是x轴，则从右往左）
  
  center 让子元素在主轴中居中显示
  
  space-around 让子元素等均分配剩余空间（类似设置了相等的左右magin效果）
  
  space-between 让子元素先两边贴边，再平分剩余空间
  

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

  align-items 的4个值
  stretch （默认值）拉伸
  
  flex-start 从侧轴头部开始排列
  
  flex-end 从侧轴尾部开始
  
  center 居中显示
  

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

  align-content 的6个值
  stretch （默认值）拉伸（设置子项元素高度平分父元素高度）
  
  flex-start 从侧轴头部开始排列
  
  flex-end 从侧轴尾部开始
  
  center 在侧轴中间显示
  
  space-around 让子元素在侧轴平分剩余空间
  
  space-between 让子元素在侧轴先分布在两头，再平分剩余空间
  

  align-content 和align-items区别

• align-items 适用于单行情况下， 上对齐、下对齐、居中和 拉伸
  

• align-content适应于换行（多行）的情况下， 可以设置 上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
  
• 单行找align-items 多行找 align-content