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