A. 用于父元素的属性

1.display: flex;

• 用法
  用于定义弹性容器

2.flex-direction

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

3.flex-wrap

• 1. 定义和用法
     flex-wrap 属性用于指定弹性盒子的子元素换行方式。
• 2. 语法
     flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit
• 3. 常用属性值
     nowrap : 默认，弹性容器为单行；
     wrap : 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行；

4.justify-content

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

5.align-items

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

B. 用于子元素的属性

1. flex

• 1. 定义和用法
     flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
     flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
     注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。
• 2. 语法
     flex: flex-grow | flex-shrink | flex-basis | auto | initial | inherit
• 3. 属性值
     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 属性。

2.align-self

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

3.order

• 1. 定义
     设置或检索弹性盒模型对象的子元素出现的順序（注：非弹性盒子，该属性不起作用）
• 2. 语法
     order: number | initial | inherit
• 3. 常用属性值
     number : 默认值是 0。值越小越靠前。