弹性盒模型
一、弹性盒模型
1.display：flex
说明：设置为弹性盒（父元素添加）
要让一个元素变成伸缩容器，需要使用display属性。
采用flex布局的元素，称为伸缩容器(flex container)，容器内的子元素称为伸缩项目(flex item)
注意：浏览器会将任何直接在伸缩容器里的连续文字块包起来，成为匿名伸缩项目；
使用flex布局实现上是使元素FFC化(flex formatting context伸缩格式化上下文)，FFC是普通流的一种；
而浮动流和定位流以及CSS其他属性对FFC是有影响的，主要表现在以下几点:
1）float、clear和vertical-align属性在伸缩项目上没有效果
2）伸缩容器的margin与其内容的margin不会重叠
3）text-align属性在伸缩容器上没有效果，因为其只可应用于块级block容器
4）另外，columns属性伸缩容器上没有效果
弹性盒模型的两种容器块级伸缩容器和内联伸缩容器的区别类似于block和inline-block的区别，一个独占一行，另一个非独占一行
2.flex-direction（主轴排列方式）
说明：顺序指定了弹性子元素在父容器中的位置
row：默认横向一列内排行
row-reverse：反向横向排列（右对齐，从后往前排，最后一项排在最前面）
column：纵向排列
column-reverse：反向纵向排列，从下往上排，最后一项排在最上面
3.justify-content（主轴对齐方式）
说明：内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐
flex-start默认，顶端对齐
flex-end末端对齐
center居中对齐
space-between两端对齐，中间自动分配
space-around自动分配距离
4.align-items（侧轴对齐方式）
说明：flex-start：弹性盒子元素的侧轴起始位置的边界紧靠住该行的侧轴其实边界
flex-end：弹性盒子元素的侧轴起始位置的边界紧靠住该行的侧轴结束边界
center：弹性盒子元素在该行的侧轴上居中放置；（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）
baseline：如果弹性盒子元素的行内轴与侧轴同为一条，则该值与“flex-start”等效，其他情况下，该值将参与基线对齐
5.flex-wrap
说明：该属性控制flex容器为单行或者多行，同时横轴的方向决定了新行堆叠方向
nowrap：flex容器为单行，该情况下flex子项可能会溢出容器
wrap：flex容器为多行，该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse：反转wrap排列
6.align-content（航宇行之间的对齐方式）
说明：当伸缩容器的侧轴还有多余空间时，。本属性可以用来调整伸缩行在容器里的对齐方式，这与调准整缩项目在主轴上对齐方式的<"justify-content">属性类似；注意本属性在只有一行的伸缩容器上是没有效果的
flex-start没有行间距
flex-end底对齐没有行间距
center居中没有行间距
space-between两端对齐，中间自动分配
space-around自动分配距离
7.align-self（加给子元素）
说明：align-self属性规定灵活容器内被选中项目的对齐方式
注意：align-self属性可重写灵活容器的align-items属性
auto默认值，元素属性继承了它父元素的align-items属性；如果没有父容器则为“stretch”；
stretch元素被拉伸以适应容器
center元素位于容器的中心
flex-strat元素位于容器的开头
flex-end元素位于容器的结尾
IE和Safari浏览器不支持align-self属性
8.order
说明：number排序优先级，数字越大越往后排，默认为0，支持负数
9.flex（flex-grow，flex-shrink，flex-basis）
说明：复合属性，设置或检索弹性盒模型对象的子元素如何分配空间；
缩写（flex：1；）则其计算值为（1 1 0%）
缩写（flex：auto）则其计算值为（1 1 auto）
flex：none，则其计算值为（0 0 auto）
flex：0 auto；或者flex：initial；则其计算值为（0 1 auto），即flex初始值
10.flex三个属性介绍
flex-grow：一个数字，规定项目将相对于其他灵活的项目进行扩展量
flex-shrink：一个数字，规定项目将相对于其他灵活的项目进行收缩的量
flex-basis：项目的长度
