目录
一、概述
flex容器中的项目如下所示，共有6个属性。
(1) flex
(2) flex-grow
(3) flex-shrink
(4) flex-basis
(5) align-self
(6) order二、详解
flex属性
概念
flex是一个复合属性，适用于CSS3弹性盒模型中的所有子元素，即容器中的项目。flex用来设置容器中的项目具体如何分配空间。flex属性是flex-grow、flex-shrink和flex-basis属性的简写，默认值为0 1 auto，后两个属性可选。
flex: none; // 表示0 0 auto
flex: auto; // 表示0 1 auto
flex: flex-grow || [ flex-shrink ] || [ flex-basis ](1) flex-grow: 定义项目的扩展比率
(2) flex-shrink: 定义项目的收缩比率
(3) flex-basis: 定义项目的默认基准值
实例
如下代码所示，定义了容器宽即主轴为800px。由于项目设置了基准值，相加300+500+600=1400px，那么子元素将会溢出1400-800=600px。由于项目设置了收缩因子，所以加权可得300*1+500*2+600*3=3100px。 于是计算各个项目分摊的溢出量如下所示。
项目a分摊溢出量：(300 * 1/3100) * 600 = 3/31, 约58px
项目b分摊溢出量：(500 * 2/1000) * 600 = 10/31, 约194px
项目c分摊溢出量：(600 * 3/1000) * 600 = 18/31, 约348px如上计算所示，项目abc各需消化58px、194px、348px，用原定的宽度减去各自的收缩值，最后得出项目a宽242px，项目b宽306px，项目c宽252px。
<style>
ul { margin: 0; padding: 0; list-style: none; }
ul { display: -webkit-flex; display: flex; width: 800px; }
ul li:nth-child(1) { -webkit-flex: 1 1 300px; flex: 1 1 300px; background: red; }
ul li:nth-child(2) { -webkit-flex: 1 2 500px; flex: 1 2 500px; background: forestgreen; }
ul li:nth-child(3) { -webkit-flex: 1 3 600px; flex: 1 3 600px; background: gold; }
</style>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
flex-grow属性
概念
该属性可以设置flex容器中项目的扩展比率。属性值为数值类型，不允许负值。默认属性值为0，表示没有分配剩余空间的权力，即使存在剩余空间，也不扩展元素。
flex-grow：<number>; // 用数值来定义扩展比率如果所有项目的flex-grow属性都为1，则它们将等分剩余空间。如果一个项目的flex-grow属性为2，其余项目都为1，则前者占据的剩余空间将比其他项多一倍。
实例1
如下代码所示。本例中bc两项都显示定义了flex-grow属性，它们的属性值表示将剩余空间分成4份，其中项目b占1份，项目c占3份，项目a不参与分配剩余空间。
<style>
ul{ margin: 0; padding: 0; list-style: none; display: flex; }
ul li:nth-child(2) { flex-grow: 1; background-color: red; }
ul li:nth-child(3) { flex-grow: 3; background-color: aqua; }
</style>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
实例2
如下代码所示，项目abc均参与分配剩余空间，分配比率1:1:3。
<style>
ul{ margin: 0; padding: 0; list-style: none; display: flex; }
ul li:nth-child(1) { flex-grow: 1; background-color: yellow; }
ul li:nth-child(2) { flex-grow: 1; background-color: red; }
ul li:nth-child(3) { flex-grow: 3; background-color: aqua; }
</style>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
flex-shrink属性
概念
该属性可以设置flex容器中项目的收缩比率，表示空间不足时，将缩小项目。属性值为数值类型，不允许负值。默认属性值为1，定义如下所示。
flex-shrink：<number>; // 用数值来定义收缩比率如果所有项目的flex-shrink属性都为1，则当空间不足时，所有项目将等比例缩小。如果一个项目的flex-shrink属性为0，表示空间不足时，该项目将维持原状，不参与缩小。
实例
如果没有显式定义flex-shrink属性，则默认属性值为1。如下代码所示，父容器宽400px，子项目每个宽200px，共计600px，超出父容器200px，则超出部分需被项目abc消化。根据收缩比率，加权综合可得200*1+200*1+200*3=1000px。于是计算各个项目分摊的溢出量如下所示。
项目a分摊溢出量：(200 * 1/1000) * 200 = 40px
项目b分摊溢出量：(200 * 1/1000) * 200 = 40px
项目c分摊溢出量：(200 * 3/1000) * 200 = 120px如上计算所示，项目abc各需消化40px、40px、120px，用原定的宽度减去各自的收缩值，最后得出项目a宽160px，项目b宽160px，项目c宽80px。
<style>
ul { width: 400px; margin: 0; padding: 0; list-style: none; display: -webkit-flex; display: flex; }
ul li { width: 200px; }
ul li:nth-child(1) { background: red; }
ul li:nth-child(2) { background: yellow; }
ul li:nth-child(3) { -webkit-flex-shrink: 3; flex-shrink: 3; background: blue; }
</style>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul> 
flex-basis属性
概念
该属性定义了flex容器中项目伸缩的基准值，即项目占据的主轴空间，浏览器根据这个属性值，计算主轴是否有多余空间。flex-basis默认属性值为auto，表示项目的本来大小。定义如下所示。
flex-basis：<length> | <percentage> | auto; // 默认值auto
// auto: 项目的本来大小
// <length>: 用长度值来定义宽度。不允许负值
// <percentage>: 用百分比来定义宽度。不允许负值实例1
同时声明width属性和flex-basis属性时，会用flex-basis的值参与计算。
如下代码所示，项目c同时设置了flex-basis和width属性，则width属性无效，以flex-basis属性为准。父容器宽600px，子项目宽100*4+600=1000px，超出400px。根据收缩比率，各项目加权综合可得100*1+100*1+600*1+100*1+100*1=1000px，于是计算各个项目分摊的溢出量如下所示。
项目a分摊溢出量：(100 * 1/1000) * 400 = 40px
项目b分摊溢出量：(100 * 1/1000) * 400 = 40px
项目c分摊溢出量：(600 * 1/1000) * 400 = 240px
项目d分摊溢出量：(100 * 1/1000) * 400 = 40px
项目e分摊溢出量：(100 * 1/1000) * 400 = 40px如上计算所示，项目abcde各需消化40px、40px、240px、40px、40px，用原定的宽度减去各自的收缩值，最后得出项目a宽60px，项目b宽60px，项目c宽360px，项目d宽60px，项目e宽60px。
<style>
.box { width: 600px; margin: 0; padding: 0; list-style: none; background-color: #eee; }
.box { display: -webkit-flex; display: flex; }
.box li { width: 100px; height: 100px; background-color: red; }
.box li:nth-child(3) { -webkit-flex-basis:600px; flex-basis:600px; }
</style>
<ul class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul> 
实例2
在实例1的基础上分别为flex容器中的项目添加内边距1px、外边距1px和边框1px，如下代码所示。在计算公式中只须改变超出部分的数值，将400px修改为410px，其余不变。
.box li {
width: 100px;
height: 100px;
padding: 1px;
background-color: red;
} 
.box li {
width: 100px;
height: 100px;
margin: 1px;
background-color: red;
} 
.box li {
width: 100px;
height: 100px;
border: 1px solid;
background-color: red;
} 
align-self属性
概念
设置flex容器中项目在交叉轴上的对齐方式，可覆盖align-items属性。定义如下所示。
align-self：auto | flex-start | flex-end | center | baseline | stretch(1) auto：默认值, 表示属性值为父元素的align-items属性值, 如果没有父元素,则属性值为stretch
(2) flex-start：项目向上对齐
(3) flex-end：项目向下对齐
(4) center：项目垂直居中
(5) baseline：如项目的行内轴与纵轴为同一条,则该值与flex-start等效,其它情况下,该值将参与基线对齐
(6) stretch：如果指定纵轴大小的属性值为auto,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制实例
<style>
.box {
display: -webkit-flex;
display: flex;
align-items: flex-end;
height: 100px;
margin: 0;
padding: 10px;
border-radius: 5px;
list-style: none;
background-color: #eee;
}
.box li {
margin: 5px;
padding: 10px;
border-radius: 5px;
background: #aaa;
text-align: center;
}
.box li:nth-child(1) {
-webkit-align-self: flex-end;
align-self: flex-end;
}
.box li:nth-child(2) {
-webkit-align-self: center;
align-self: center;
}
.box li:nth-child(3) {
-webkit-align-self: flex-start;
align-self: flex-start;
}
.box li:nth-child(4) {
-webkit-align-self: baseline;
align-self: baseline;
padding: 20px 10px;
}
.box li:nth-child(5) {
-webkit-align-self: baseline;
align-self: baseline;
}
.box li:nth-child(6) {
-webkit-align-self: stretch;
align-self: stretch;
}
.box li:nth-child(7) {
-webkit-align-self: auto;
align-self: auto;
}
</style>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>i</li>
</ul>order属性
定义
设置flex容器中项目排列顺序。属性值为整数类型，默认值为0，可以为负数。用整数来定义项目出现的顺序，数值小的排在前面。定义如下所示。
order：<integer>实例
<style>
.box {
display: -webkit-flex;
display: flex;
margin: 0;
padding: 10px;
list-style: none;
background-color: #eee;
}
.box li {
width: 100px;
height: 100px;
border: 1px solid #aaa;
text-align: center;
}
#box li:nth-child(3) {
-webkit-order: -1;
order: -1;
}
</style>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
