概念：

• Flexbox是一组用于构建一维布局的相关CSS属性；
• flexbox背后的主要思想是，容器元素内部的空白空间可以被其子元素自动划分；
• Flexbox可以轻松地在父容器内水平和垂直地自动对齐项目
• Flexbox解决了常见的问题，如垂直居中和创建等高柱
• Flexbox非常适合替换Float，使我们能够编写更少、更干净的HTML和CSS代码

初始使用：

display:flex;

• 上述代码将元素置为弹性容器
• 元素内部的子元素也都是弹性目标

• 弹性容器生成时，会由一个主轴和十字轴，这个特别必要，当我们移动的时候心里要记得这个轴

FLEX CONTAINER(Flex 容器)的相关参数

gap:0 | <length>   ##默认参数
  ##在项目之间创建空间，而不使用边距

justify-content:flex-start  ##默认参数
flex-end | center | space-between |space-around | space-evenly
##沿主轴对齐项目（默认为水平）

align-items: stretch #默认参数
flex-start | flex-end | center | baseline
##沿横轴对齐项目（默认情况下为垂直）

flex-direction: row | row-reverse | column | column-reverse
##定义哪个是主轴

flex-wrap: nowrap #默认参数
wrap | wrap-reverse
##如果项目太大，允许项目换行

align-content: stretch #默认参数
flex-start | flex-end | center | space-between | space-around
##仅当存在多行时适用(flex-wrap: wrap)

弹性元素

align-self: auto ##默认参数
| stretch | flex-start | flex-end | center | baseline
## 覆盖单个弹性项的对齐元素

flex-grow: 0 ##默认参数
| <integer>
##允许元素增长（0表示否，1表示允许）

flex-shrink: 1 ##默认参数
| <integer>
##允许元素收缩（0表示否，1表示允许）

flex-basis: auto ##默认参数
| <length>
##定义元素宽度，而不是宽度属性

flex: 0 1 auto ##默认参数 
| <int><int><len>
##flex为flex-grow的缩写

order： 0 
控制元素顺序-1使元素优先，1使元素最后