display:flex; 是指弹性布局，它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

激活弹性容器:

display:flex;

常用对齐方式

  display:flex;
  /* 内容左对齐 | 内容右对齐 | 居中对齐 | 内容平均分 | 内容两侧距离相等 */
  /* justify-content: flex-start | flex-end | center | space-between | space-around */
  justify-content: center;
  /* 内容上方对齐 | 内容下方对齐 | 居中对齐 | 内容平均分 | 内容两侧距离相等 */
  /* align-items: flex-start | flex-end | center | baseline | stretch */
  align-items: center;

弹性容器 ( 父盒子)

1.flex-direction 改变主轴方向指定了弹性子元素在父容器中的位置

  /* 从左到右依次排列 | 从右到左依次排列 | 从上到下依次排列 | 从下到上依次排列 */
  /* flex-direction: row | row-reverse | column | column-reverse  默认为 row */
  flex-direction: row;

2. 内容对齐justify-content属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐

  /* 内容左对齐 | 内容右对齐 | 居中对齐 | 内容平均分 | 内容两侧距离相等 */
  /* justify-content: flex-start | flex-end | center | space-between | space-around */
  justify-content: center;

3. align-items 设置侧轴上的子元素排列方式(单行)

  /* 内容上方对齐 | 内容下方对齐 | 居中对齐 | 内容平均分 | 内容两侧距离相等 */
  /* align-items: flex-start | flex-end | center | baseline | stretch */
  align-items: center;

4. flex-wrap 属性用于指定弹性盒子的子元素换行方式。

  /*             不换行 | 换行第一行在上方| 换行第一行在下  */   
  /* flex-wrap: nowrap | wrap  | wrap-reverse  */
  flex-wrap: wrap;

5. align-content 设置侧轴上的子元素的排列方式(多行)

  flex-wrap: wrap;
  /* 上方对齐 | 下方对齐 | 居中对齐 | 上下两侧对齐空白在中间 | 上下两侧空白相等 | 占满父容器高度 */
  /* align-content:flex-start | flex-end | center | space-between | space-around | stretch */
  align-content: stretch;

6. flex-flow 属性是 direction 属性和 wrap 属性的简写形式，默认值为row nowrap

  /* flex-flow: <flex-direction> || <flex-wrap>; */
  flex-flow: wrap;

弹性元素(子盒子 同时也是弹性容器)

1. align-self属性允许单个项目有与其他项目不一样的对齐方式，覆盖align-items

  /*  默认  | 上方对齐   | 下方对齐  | 居中   */
  /* align-self: auto | flex-start | flex-end | center   */
  align-self: stretch;

2. flex子项目占的份数

 /*  占剩余内容的多少 */
  flex: 1;

3. order 属性定义了项目的排列顺序

  /* 。数值越小，排列越靠前，默认为0 */
  order: 1;

4. flex-grow 属性用于设置弹性盒子的扩展比率

  /* flex-grow属性用于设置弹性盒子的扩展比率 */
  flex-grow: 2;

5. flex-grow属性定义项目的放大比例 默认为0，

  /* 即如果存在剩余空间，也不放大。*/
  flex-grow: 1;

6. flex-shrink属性定义了项目的缩小比例当设置为0时，即使在空间不足的情况下，该项目也不会被压缩

  /* 默认为1，即如果空间不足，该项目将缩小。设置为0则不压缩 */ 
  flex-shrink: 0;