設置項目，用(yòng)于設置項目的尺寸、位置，以及對(duì)項目的對(duì)齊方式做特殊設置。
order 屬性
設置項目沿主軸方向上(shàng)的排列順序，數值越小(xiǎo)，排列越靠前。屬性值爲整數。
.item{
order: 0（默認值） | <integer>
}
flex-shrink 屬性
當項目在主軸方向上(shàng)溢出時(shí)，通過設置項目收縮因子來(lái)壓縮項目适應容器。屬性值爲項目的收縮因子，屬性值取非負數。
.item{
flex-shrink: 1（默認值） | <number>
}
.item1{
width: 120px;
flex-shrink: 2;
}
.item2{
width: 150px;
flex-shrink: 3;
}
.item3{// 項目3未設置flex-shrink，默認flex-shrink值爲1
width: 180px;
}
爲了(le)加深理(lǐ)解，我們舉個例子：
一個寬度爲400px的容器，裏面的三個項目width分别爲120px，150px，180px。分别對(duì)這(zhè)項目1和(hé)項目2設置flex-shrink值爲2和(hé)3。
.container{
display: flex;
width: 400px; // 容器寬度爲400px
}
在這(zhè)個例子中，項目溢出 400 - (120 + 150 + 180) = -50px。計(jì)算(suàn)壓縮量時(shí)總權重爲各個項目的寬度乘以flex-shrink的總和(hé)，這(zhè)個例子壓縮總權重爲120 * 2 + 150 * 3+ 180 * 1 = 870。各個項目壓縮空(kōng)間大(dà)小(xiǎo)爲總溢出空(kōng)間乘以項目寬度乘以flex-shrink除以總權重：
item1的最終寬度爲：120 - 50 * 120 * 2 / 870 ≈ 106px
item2的最終寬度爲：150 - 50 * 150 * 3 / 870 ≈ 124px
item3的最終寬度爲：180 - 50 * 180 * 1 / 870 ≈ 169px
其中計(jì)算(suàn)時(shí)候值如果爲小(xiǎo)數，則向下(xià)取整。
需要注意一點，當項目的壓縮因子相加小(xiǎo)于1時(shí)，參與計(jì)算(suàn)的溢出空(kōng)間不等于完整的溢出空(kōng)間。在上(shàng)面例子的基礎上(shàng)，我們改變各個項目的flex-shrink。
.container{
display: flex;
width: 400px; // 容器寬度爲400px
}
.item1{
width: 120px;
flex-shrink: 0.1;
}
.item2{
width: 150px;
flex-shrink: 0.2;
}
.item3{
width: 180px;
flex-shrink: 0.3;
}
總權重爲：120 * 0.1 + 150 * 0.2 + 180 * 0.3 = 96。參與計(jì)算(suàn)的溢出空(kōng)間不再是50px，而是50 * (0.1 + 0.2 + 0.3) / 1 =30：
item1的最終寬度爲：120 - 30 * 120 * 0.1 / 96 ≈ 116px
item2的最終寬度爲：150 - 30 * 150 * 0.2 / 96 ≈ 140px
item3的最終寬度爲：180 - 30 * 180 * 0.3 / 96 ≈ 163px
flex-grow 屬性
當項目在主軸方向上(shàng)還有剩餘空(kōng)間時(shí)，通過設置項目擴張因子進行剩餘空(kōng)間的分配。屬性值爲項目的擴張因子，屬性值取非負數。
.item{
flex-grow: 0（默認值） | <number>
}
爲了(le)加深理(lǐ)解，我們舉個例子：
一個寬度爲400px的容器，裏面的三個項目width分别爲80px，120px，140px。分别對(duì)這(zhè)項目1和(hé)項目2設置flex-grow值爲3和(hé)1。
.container{
display: flex;
width: 400px; // 容器寬度爲400px
}
.item1{
width: 80px;
flex-grow: 3;
}
.item2{
width: 120px;
flex-grow: 1;
}
.item3{// 項目3未設置flex-grow，默認flex-grow值爲0
width: 140px;
}
在這(zhè)個例子中，容器的剩餘空(kōng)間爲 400 - (80 + 120 + 140) = 60px。剩餘空(kōng)間按 60 / (3 + 1 + 0) = 15px進行分配：
item1的最終寬度爲：80+ (15 * 3) = 125px
item2的最終寬度爲：120 + (15 * 1) = 135px
item3的最終寬度爲：140 + (15 * 0) =140px
需要注意一點，當項目的擴張因子相加小(xiǎo)于1時(shí)，剩餘空(kōng)間按除以1進行分配。在上(shàng)面例子的基礎上(shàng)，我們改變各個項目的flex-grow。
.container{
display: flex;
width: 400px; // 容器寬度爲400px
}
.item1{
width: 50px;
flex-grow: 0.1;
}
.item2{
width: 80px;
flex-grow: 0.3;
}
.item3{
width: 110px;
flex-grow: 0.2;
}
在這(zhè)個例子中，容器的剩餘空(kōng)間爲 400 - (50 + 80 + 110) = 160px。由于項目的flex-grow相加0.1 + 0.3 + 0.2 = 0.6小(xiǎo)于1，剩餘空(kōng)間按 160 / 1 = 160px劃分。例子中的項目寬度分别爲：
item1的最終寬度爲：50 + (160 * 0.1) = 66px
item2的最終寬度爲：80 + (160 * 0.3) = 128px
item3的最終寬度爲：110 + (160 * 0.2) = 142px
flex-basis 屬性
當容器設置flex-direction爲row或row-reverse時(shí)，flex-basis和(hé)width同時(shí)存在，flex-basis優先級高(gāo)于width，也(yě)就是此時(shí)flex-basis代替項目的width屬性。
當容器設置flex-direction爲column或column-reverse時(shí)，flex-basis和(hé)height同時(shí)存在，flex-basis優先級高(gāo)于height，也(yě)就是此時(shí)flex-basis代替項目的height屬性。
需要注意的是，當flex-basis和(hé)width（或height），其中一個屬性值爲auto時(shí)，非auto的優先級更高(gāo)。
.item{
flex-basis: auto（默認值） | <number>px
}
flex 屬性
是flex-grow，flex-shrink，flex-basis的簡寫方式。值設置爲none，等價于00 auto。值設置爲auto，等價于1 1 auto。
.item{
flex: none | auto | @flex-grow @flex-shrink@flex-basis
}
align-self 屬性
設置項目在行中交叉軸方向上(shàng)的對(duì)齊方式，用(yòng)于覆蓋容器的align-items，這(zhè)麽做可以對(duì)項目的對(duì)齊方式做特殊處理(lǐ)。默認屬性值爲auto，繼承容器的align-items值，當容器沒有設置align-items時(shí)，屬性值爲stretch。
.item{
align-self: auto（默認值） | flex-start | center | flex-end | baseline |stretch
}
網站(zhàn)建設開(kāi)發|APP設計(jì)開(kāi)發|小(xiǎo)程序建設開(kāi)發