采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
上篇介绍设置在容器上的属性，本篇继续介绍设置在项目上的属性。
六、设置在项目上的属性
order – 决定flex元素的顺序。
align-self – 自身对齐交叉轴，覆盖父元素设置的align-items
align-self属性接受和align-items一样的那些值。flex-grow –定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink –定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis –在分配多余空间之前，项目占据的主轴空间。
flex –flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
项目上主轴方向相关属性
1 项目-主轴：order
语法：
order: number
order属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局。拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局。
.test {
width: 600px;
border: 1px solid #000;
display: flex;
}
.test p{
width: 100px;
height: 100px;
background-color: red;
line-height: 100px;
text-align: center;
margin: 8px;
}
.item1 {
order: 1;
}
.item2 {
order: 0;
}
.item3 {
order: -1;
}
<div class="test">
<p class="item1">1</p>
<p class="item2">2</p>
<p class="item3">3</p>
</div>
注意点：
- 所有 flex 项默认的 order 值是 0。
- order 值大的 flex 项比 order 值小的在显示顺序中更靠后。
- 相同 order 值的 flex 项按源顺序显示。所以假如你有四个元素，其 order 值分别是2，1，1和0，那么它们的显示顺序就分别是第四，第二，第三，和第一。
- 第三个元素显示在第二个后面是因为它们的 order 值一样，且第三个元素在源顺序中排在第二个后面。
2 项目-交叉轴：align-self
语法：
align-self: auto|stretch|center|flex-start|flex-end|baseline
设置在项目上的交叉轴方向的属性只有一个，align-self自身对齐交叉轴，覆盖父元素设置的align-items，属性值列表和align-items相同。
属性值:
flex-start: 元素与容器的顶部对齐。
flex-end: 元素与容器的底部对齐。
center: 元素纵向居中。
baseline: 元素在容器的基线位置显示。
stretch: 元素被在侧轴方向被拉伸到与容器相同的高度或宽度。
3 项目-主轴：flex-basis
语法：
flex-basis: number|auto
取值：
flex-basis指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 来改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的宽或者高（取决于主轴的方向）的尺寸大小。
flex-basis 的取值有两个：number和auto。
- flex-basic 初始值默认取值是auto,
如果主轴方向是水平方向(row)，auto等于flex项目的宽度(width)。
如果主轴方向是垂直方向(conlumn), auto等于flex项目的高度(height)。 - flex-basis 取值为number, 表示可以设置flex元素的主轴方向的最小宽度或者最小高度，number 单位为px, rem。
- 注意：flex-basis 取值为number会覆盖掉flex项目原有的宽度或高度(取决于主轴的方向)。
.test {
width: 600px;
border: 1px solid #000;
display: flex;
}
div p{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin: 10px;
}
.item1{
background-color: red;
}
.item2 {
background-color: green;
flex-basis: 200px;
}
.item3 {
background-color: orange;
flex-basis: auto;
}
<div class="test">
<p class="item1">1</p>
<p class="item2">2</p>
<p class="item3">3</p>
</div>
可见，item3和原始宽度一样，item2的flex-basis的200px, 覆盖掉width:100px,
4 容器-主轴：flex-grow
语法：
flex-grow: number
flex-grow 指的是当flex项目没有占满整个flex容器的空间时，每一个项目怎么变化，要不要变大去占据空间，grow就是生长，长大的意思。
flex-grow属性定义项目的放大比例，默认为0，即不作任何的放大。flex容器下的项目是根据flex-grow值的权重对容器的剩余可用空间进行放大的。注意：剩余可用空间是减去所有flex元素后计算得到的空间大小。number负值无效。
.test {
width: 600px;
border: 1px solid #000;
display: flex;
}
div p{
height: 100px;
line-height: 100px;
text-align: center;
margin: 10px;
background-color: orange;
}
.item1{
flex-grow: 1;
}
.item2 {
flex-grow: 2;
}
.item3 {
flex-grow: 3;
}
<div class="test">
<p class="item1">1</p>
<p class="item2">2</p>
<p class="item3">3</p>
</div>
这里因为所有flex项目都没有设置固定宽度，所以，他们会按照各自flex-basis设置值的占总体值之和的权重去扩展自身的宽度。
即item1占1份，item1的宽度为容器宽度的1/6。item2占2份，item2的宽度为容器宽度的2/6。item3占3份，item3的宽度为容器宽度的3/6。
注意：容器宽度为去掉margin和padding后的宽度。
5 容器-主轴：flex-shrink
语法：
flex-shrink: number
flex-shrink 指的是当flex项目超出整个flex容器的空间时，每一个项目怎么变化，要不要缩小去适应空间，shrink就是缩小的意思。
该属性定义项目的缩小比例，默认为0，即不作任何的缩小。flex容器下的项目是根据这个值的权重得出容器的超出空间比例分配，对设置该属性的项目进行缩小。number负值无效。
.test {
width: 600px;
border: 1px solid #000;
display: flex;
}
div p{
width: 300px;
height: 100px;
line-height: 100px;
text-align: center;
margin: 10px;
background-color: orange;
}
.item1{
flex-shrink: 0;
}
.item2 {
flex-shrink: 1;
}
.item3 {
flex-shrink: 2;
}
<div class="test">
<p class="item1">1</p>
<p class="item2">2</p>
<p class="item3">3</p>
</div>
这里flex容器的宽度设置成600px，flex项目的宽度均为300px；为item1分配完空间后，剩下的空间被后面两个项目按比例缩小分配。
注意：容器宽度为去掉margin和padding后的宽度。
注意:flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小依据 flex-shrink 的值。比如：上边示例中，容器test总宽度为600px，每个p宽度为300px，3个flex元素的宽度大于容器的宽度，所以3个p依据flex-shrink值进行收缩。
6 项目-主轴 flex
6.1 语法：
flex: flex-grow flex-shrink flex-basis | auto
flex属性是前三个属性：flex-grow、flex-shrink、flex-basis的简写形式。
除了可以分别填flex-grow、flex-shrink、flex-basis，这3个属性值外。
6.2 flex还有2个经常使用的属性值：
initial 属性默认值，相当于将属性设置为"flex: 0 1 auto"。
元素会根据自身宽高设置尺寸。它会缩短自身以适应容器，但不会伸长并吸收flex容器中的额外自由空间来适应容器 。
auto : 相当于将属性设置为 "flex: 1 1 auto"。
元素会根据自身的宽度与高度来确定尺寸，但是会自行伸长以吸收flex容器中额外的自由空间，也会缩短至自身最小尺寸以适应容器。
none : 相当于将属性设置为"flex: 0 0 auto"。
元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应flex容器。
建议优先使用这个2个属性，而不是单独写三个分离的属性。
6.3 flex语法
flex 属性可以指定1个，2个或3个值。
单值语法: 值必须为以下其中之一:
- 一个无单位数(<number>): 它会被当作<flex-grow>的值。如：flex:1
- 一个有效的宽度(width)值: 它会被当作 <flex-basis>的值。如：flex:200px
- 关键字none, auto,或initial. 如：flex:auto
双值语法: 第一个值必须为一个无单位数，并且它会被当作<flex-grow>的值。第二个值必须为以下之一：
- 一个无单位数：它会被当作<flex-shrink>的值。如：flex:1 1
- 一个有效的宽度值: 它会被当作<flex-basis>的值。如：flex:1 200px
三值语法:
- 第一个值必须为一个无单位数，并且它会被当作<flex-grow>的值。
- 第二个值必须为一个无单位数，并且它会被当作 <flex-shrink>的值。
- 第三个值必须为一个有效的宽度值， 并且它会被当作<flex-basis>的值。
如：flex:1 1 200px
结尾
至此，flex布局所有属性都介绍完毕
