文章标题

弹性盒模型 （flex box）

1、box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素 {box-sizing:border-box}

 content-box 这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box 为元素设定了宽度和高度形成边框盒。 就是说，为元素指定的任何内边距和边框都是在已设定的宽度和高度内进行绘制。 内容的宽高：边框盒减去padding值和border值。
注意：设置了flex布局后，当前容器内子元素的float、clear、vertical-align属性将全部失效。

2、浏览器前缀

.flex-container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}

3、属性

设置给容器(父级)的属性有6个。
1.主轴排列方向：flex-direction:row/row-reverse/column/column-reverse
说明：顺序指定了弹性子元素在父容器中的位置改变主轴的方向
row 默认值，主轴为水平，起点在左端
row-reverse 反转横向排列（右对齐，从后往前排，最后一项排在最前面
column 主轴为垂直，起点在上端
column-reverse 反转纵向排列，从下往上排，最后一项排在最上面
2.flex-wrap:nowarp/warp/warp-reverse
说明：该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
nowrap flex容器为单行。flex子项可能会溢出容器，默认值
wrap flex容器为多行。flex子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse 反转 wrap 排列，第一行在下面
3.flex-flow：flex-direction flex-wrap
4.主轴对齐方式：justify-content:flex-start/flex-end/center/space-between/space-around
说明：项目在主轴（main axis）的对齐方式
flex-start 默认，主轴顶端对齐
flex-end 主轴末端对齐
center 主轴居中对齐
space-between 主轴两端对齐（两边到边，中间均配），中间自动分配
space-around 自动分配距离，每个项目两侧的间隔相等。
5.侧轴的对齐方式align-items:flex-start/flex-end/center/baseline
flex-start 交叉轴顶端对齐
flex-end 交叉轴末端对齐
center 交叉轴的中点对齐
baseline 第一行文字基线对齐
stretch （不完全）默认值，如果项目未设置高度或设为auto，将占满整个容器高度
6.行与行之间对齐方式align-content:flex-start/flex-end/center/space-between/space-around
说明：当容器的交叉轴还有多余空间时，本属性可以用来调整[行]在[容器]里的对齐方式，这与调整项
目在主轴上对齐方式的justify-content属性类似
请注意本属性在项目只有一行的容器上没有效果。
flex-start 交叉轴的顶端对齐
flex-end 交叉轴的末端对齐
center 交叉轴居中对齐
space-between 交叉轴两端对齐，中间自动分配
space-around 自动分配距离
stretch 默认值，占满整个交叉轴

4、项目的属性

设置给项目(子级)的属性有6个。
1.项目的排列顺序order:number说明：值越小越靠前，默认为0
2.align-self
说明：规定容器单个项目的对齐方式。
注意：align-self属性可重写容器的 align-items 属性。
auto 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则等同”stretch”
flex-start 元素位于容器的开头
flex-end 元素位于容器的结尾
center 元素位于容器的中心
baseline 第一行文字基线对齐
stretch 元素被拉伸以适应容器
注意：Internet Explorer 和 Safari 浏览器不支持 align-self 属性。该属性除了auto，其他都与align-items属性完全一样
3.项目的放大比例flex-grow:number
说明：规定项目将相对于其他灵活的项目进行扩展的量，默认为0

<ul class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
.box{display:flex;width:600px;}
.box li:nth-child(1){width:200px;}
.box li:nth-child(2){width:50px;flex-grow:1;}
.box li:nth-child(3){width:50px;flex-grow:3;}

flex-grow的默认值为0，如果没有显示定义该属性，是不会拥有分配空间权利的
如上，flex容器的剩余空间分成4份，其中b占1份，c占3份，即1：3，flex容器的剩余空间长度为600-200-50-50=300，
所以最终a，b，c的长度分别
为：
a：200+(300/4*0)=200
b：50+(300/4*1)=125
c：50+(300/4*3)=275

4.项目的缩小比例flex-shrink：number
说明：如果设置为1，该项目在容器空间不足时将缩小，如果所有项目设置为1，将一起等比例缩小，如
果其中一个为0，其他为1，那么为1的等比例缩小，为0的不缩小。该属性不能设置负值

<ul class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<style>
.box{display:flex;width:400px;}
.box li:nth-child(1){width:200px;}
.box li:nth-child(2){width:200px;}
.box li:nth-child(3){width:200px;flex-shrink:3;}
</style>

本例中c显式的定义了flex-shrink，a,b没有显式定义，但将根据默认值1来计算，可以看到总共将剩余空间分成了5份，其中a占1份，b占1份，c占3分，
即1:1:3
我们可以看到父容器定义为400px，子项被定义为200px，相加之后即为600px，超出父容器200px。那么这么超出的200px需要被a,b,c消化
通过收缩因子，所以加权综合可得200*1+200*1+200*3=1000px；
于是我们可以计算a,b,c将被移除的溢出量是多少：
a被移除溢出量：(200*1/1000)*200，即约等于40px
b被移除溢出量：(200*1/1000)*200，即约等于40px
c被移除溢出量：(200*3/1000)*200，即约等于120px
最后a,b,c的实际宽度分别为：200-40=160px, 200-40=160px, 200-120=80px

5.项目的长度flex-basis:length/auto
说明：分配空间之前，项目占据的主轴空间。浏览器根据这个属性来计算主轴是否有多余空间，默认为
auto，就是项目的本来大小
注：可以设置为跟width或height一样的值，则该项目将占据固定空间
假设：如果一个盒子父级是600px，有5个子级每个子级宽100，唯独第三个子级600，那么就会自动压
缩，将600分成10分给每个盒子

6.缩写属性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 则其计算值为0 1 auto，即flex初始值，默认值

实例一
<style>
.flex{display:flex;width:800px;margin:0;padding:0;list-style:none;}
.flex :nth-child(1){flex:1 1 300px;}
.flex :nth-child(2){flex:2 2 200px;}
.flex :nth-child(3){flex:3 3 400px;}
</style>
<ul class="flex">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>

本例定义了父容器宽（即主轴宽）为800px，由于子元素设置了伸缩基准值flex-basis，相加300+200+400=900，那么子元素将会溢出900-800=100px；
由于同时设置了收缩因子，所以加全综合可得300*1+200*2+400*3=1900px；
于是我们可以计算a,b,c将被移除的溢出量是多少：
a被移除溢出量：(300*1/1900)*100，即约等于16px
b被移除溢出量：(200*2/1900)*100，即约等于21px
c被移除溢出量：(400*3/1900)*100，即约等于63px

仍然是上面这个例子，不过将容器的宽度改成了1500px
<ul class="flex">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<style>
.flex{display:flex;width:1500px;margin:0;padding:0;list-style:none;}
.flex :nth-child(1){flex:1 1 300px;}
.flex :nth-child(2){flex:2 2 200px;}
.flex :nth-child(3){flex:3 3 400px;}
</style>

解释：
本例定义了父容器宽（即主轴宽）为1500px，由于子元素设置了伸缩基准值flex-basis，相加300+200+400=900，那么容器将有1500-900=600px的剩余
宽度；
于是我们可以计算a,b,c将被扩展量是多少：
a的扩展量：(1/(1+2+3))*600，即约等于100px
b的扩展量：(2/(1+2+3))*600，即约等于200px
c的扩展量：(3/(1+2+3))*600，即约等于300px
最后a,b,c的实际宽度分别为：300+100=400px, 200+200=400px, 400+300=700px

从本例能看出：
当「flex-basis」在「flex」属性中不为0时（包括值为auto，此时伸缩基准值等于自身内容宽度），「flex子项」将分配容器的剩余空间（剩余空间即等于容器宽度减去各项的伸缩基准值）。
当「flex-basis」在「flex」属性中等于0时，「flex子项」将分配容器的所有空间（因为各项的伸缩基准值相加等于0，剩余空间等于容器宽度减去各项的伸缩基准值，即减0，最后剩余空间值等于容器宽度），所以可以借助此特性，给各子项定义「flex: n」来进行按比例均分容器总宽度。