定义

display:flex 父元素为弹性容器，子元素为弹性元素

主轴:
弹性元素的排列方向称为主轴侧轴
与主轴垂直方向的称为侧轴

弹性元素的属性

• flex-grow  指定弹性元素的伸展的系数

  -当父元素有多余空间的时，子元素如何伸展-父元素的剩余空间，会按照比例进行分配

  
  

• flex-shrink 指定弹性元素的收缩系数
  

          -当父元素中的空间不足以容纳所有的子元素时，如果对子元素进行收缩

• flex-direction指定容器中弹性元素的排列方式
  

  可选值:

  row	默认值，弹性元素在容器中水平排列（左向右)主轴自左向右
  row-reverse	弹性元素在容器中反向水平排列（右向左)主轴自右向左
  column	弹单性元素纵向排列（自上向下)
  column-reverse	弹性元素方向纵向排列(自下向上)

• flex-wrap: 设置弹性元素是否在弹性容器中自动换行

可选值:

nowrap	默认值，元素不会自动换行
wrap	元素沿着辅轴方向自动换行
wrap-reverse	元素沿着辅轴反方向换行

• flex-flow:flex-direction和flex-wrap的简写属性（可同时设置这两个属性）

• justify-content-如何分配主轴上的空白空间（主轴上的元素如何排列)

          -可选值:

flex-start	元素沿着主轴起边排列
flex-end	元素沿着主轴终边排列
center	元素居中排列
space-around	空白分布到元素两侧
space-between	空白均匀分布到元素间
space-evenly	空白分布到元素的单侧

• align-items :-元素在辅轴上如何对齐-元素间的关系

-可选值:

stretch	默认值，将元素的长度设置为相同的值
flex-start	元素不会拉伸,沿着辅轴起边对齐
flex-end	沿着辅轴的终边对齐
center	居中对齐

• 如果在弹性盒中需要上下左右对齐，则可以设置justify-content:center;align-items:center;

• align-content:辅轴空白空间的分布

可选值参考justify-content

order：设置弹性盒对象元素的顺序