采用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布局所有屬性都介紹完畢
