1、主题思想：
- 元素可以改变大小，以适应可用空间，当可用空间变大，弹性盒将伸展大小以填充可用空间，当弹性盒子超出可用空间时将自动缩小。总之，弹性盒是可以让你的布局根据浏览器的大小变化进行自动伸缩；
- flexbox是一个可以让你告别浮动，完美实现垂直水平居中的新特性。
2、给父元素添加的属性：
- display：flex —— 设置某个块元素为弹性盒；： flex-direction —— 顺序指定了弹性子元素在父容器中的位置（主轴排列方向）；
- row：默认在一行排列；
- row-reverse：反转横向排列，右对齐，从后往前排，最后一项排在最前面；
- column：纵向排列；
- column-reverse：反转纵向排列，从下往上排，最后一项排在最上面；
- justify-content —— 把弹性项沿着弹性容器的主轴线对齐（主轴对齐方式）：
- flex-start：默认，顶端对齐；
- flex-end：末端对齐；
- center：居中对齐；
- space-between：两端对齐，中间自动分配；
- space-around：自动分配距离；
- align-items —— 侧轴对齐方式：
- flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界；
- flex-end：弹性盒子元素的侧轴（纵轴）起始位置紧靠住该行的侧轴结束边界；
- center：弹性盒子元素在该行的侧轴（纵轴）还是那个居中放置，如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度；
- baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与flex-start等效，其它情况下，该值将参与基线对齐；
- flex-wrap —— 该属性控制flex容器是单行或者是多行，同时横轴的方向决定了新的堆叠的方向：
- nowrap：flex容器为单行，该情况下flex子项可能会溢出容器；
- wrap：flex容器为多行，该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行；
- wrap-reverse：反转wrap排行；
- align-content —— 行与行之间对齐方式，当伸缩容器的侧轴还有多余空间时，本属性可以用来调准【伸缩行】在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的justify-content属性类似，请注意本属性在只有一行的伸缩容器上没有效果；
- flex-start：没有行间距；
- flex-end：底对齐没有行间距；
- center：居中对齐没有行间距；
- space-between：自动分配距离；
3、给子元素添加的属性：
- align-self —— 属性规定灵活容器内被选中项目的对齐方式，可重写灵活容器的align-items属性：
- auto：默认位置，如果没有父元素，则计算值为stretch；
- flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界；
- flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界；
- center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度；
- baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与flex-start等效，其它情况下，该值将参与基线对齐；
- stretch：如果指定侧轴大小的属性值为auto，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照min/max-width/height属性的限制；
4、其它：
- order：number排序优先级，数字越大越往后排，默认为0，支持负数；
5、flex：复合属性，设置或检索弹性盒模型对象的子元素如何分配空间
- 如果缩写为flex：1，则其计算值为[ 1 1 auto]；
- 如果缩写为flex：auto，则其计算值为[1 1 auto]；
- 如果缩写为flex：auto，则其计算值为[0 0 auto]；
- 如果缩写为flex： 0 auto 或者flex：initial，则其计算值为[0 1 auto]，即flex初始值