A. 用于父元素的属性

`1.display: flex;`

1. 定义和用法
  flex-direction 属性指定了弹性子元素在父容器中的位置。
1. 语法
  flex-direction: row | row-reverse | column | column-reverse
1. 常用属性值
  row：横向从左到右排列（左对齐），默认的排列方式。
  row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
  column：纵向排列。
  column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

1. 定义
  沿着父容器主轴方向分配弹性元素之间及其周围的空间。
1. 语法
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
1. 常用属性值
  flex-start: 弹性项目向行头紧挨着填充；
  flex-end: 弹性项目向行尾紧挨着填充；
  center: 弹性项目居中紧挨着填充;
  space-between: 均匀排列每个元素,首个元素放置于起点,末尾元素放置于终点;
  space-around: 弹性项目平均分布在该行上，两边留有一半的间隔空间;
  space-evenly: 均匀排列每个元素，每个元素之间的间隔相等;

1. 定义
  align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
1. 语法
  align-items: flex-start | flex-end | center | baseline | stretch
1. 常用属性值
  center: 在侧轴居中点
  flex-start: 在侧轴起始点（紧靠边界）
  flex-end: 在侧轴结束点（紧靠边界）

1. 定义和用法
  flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
  flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
  注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。
1. 语法
  flex: flex-grow | flex-shrink | flex-basis | auto | initial | inherit
1. 属性值
  flex-grow : 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
  flex-shrink : 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
  flex-basis : 项目的默认长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
  auto : 相当于 1 1 auto。
  none : 相当于 0 0 auto。
  initial : 设置该属性为它的默认值，即为 0 1 auto。
  inherit : 从父元素继承该属性。
  
  注意： initial 关键字用于设置 CSS 属性为它的默认值。
  initial 关键字可用于任何 HTML 元素上的任何 CSS 属性。

1. 定义和用法
  flex子元素自身在侧轴（纵轴）方向上的对齐方式。
  注意：align-self 属性可重写灵活容器的 align-items 属性。
1. 语法
  align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit
1. 常用属性值
  center : 在侧轴居中点；
  flex-start : 在侧轴起始点（紧靠边界）
  flex-end : 在侧轴结束点（紧靠边界）