專案屬性：
設定容器內專案相關樣式，用於設定專案的尺寸、位置，以及對專案的對齊方式做特殊設定。
專案元素屬性集合：
order、flex-grow、flex-shrink、flex-basis、flex、align-self
專案屬性：
①沿主軸方向上的排列順序order: 0（預設值） | 在這個例子中，專案溢位 400 - (120 + 150 + 180) = -50px。計算壓縮量時總權重為各個專案的寬度乘以flex-shrink的總和，這個例子壓縮總權重為120 * 2 + 150 * 3+ 180 * 1 = 870。各個專案壓縮空間大小為總溢位空間乘以專案寬度乘以flex-shrink除以總權重：
總權重為：120 * 0.1 + 150 * 0.2 + 180 * 0.3 = 96。參與計算的溢位空間不再是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: 0（預設值） |
場景：grow英文意思是《擴大，擴充套件，增加》，這就代表當父元素的寬度大於子元素寬度之和時，並且父元素有剩餘，此時flex-grow就可以使得子元素擴張，分享父元素的空間。
取值：flex-grow的預設值為0，意思是該元素不索取父元素的剩餘空間，如果值大於0，表示索取。
案例：
專案屬性flex-basis
flex-basis屬性
當容器設定flex-direction為row或row-reverse，flex-basis和width同時存在，flex-basis優先順序高於width，也就是此時flex-basis代替width屬性。
當容器設定flex-direction為column或column-reverse，flex-basis和height同時存在，flex-basis優先順序高於height，就是此時flex-basis代替height屬性。
需要注意的是，當flex-basis和width（或height），其中乙個屬性值為auto時，非auto的優先順序更高。
屬性案例:
專案屬性flex
flex 屬性
本質：flex-grow，flex-shrink，flex-basis的簡寫方式。
值設定為none，等價於00 auto。值設定為auto，等價於1 1 auto。
專案屬性align-self
align-self屬性
設定專案在行中交叉軸方向上的對齊方式，用於覆蓋容器的align-items，可以對專案的對齊方式做特殊處理。
預設屬性值為auto，繼承容器的align-items值，當容器沒有設定align-items時，屬性值為stretch。
align-self: auto（預設值） | flex-start | center | flex-end | baseline |stretch
微信小程式 flex布局屬性
flex direction 主軸方向 row 橫向 row reverse 橫向倒序 column 縱向 column reverse 縱向倒序 flex wrap 元素排列換行 nowrap 不換行自動按比例壓縮 wrap 換行超出元素在下方 wrap reverse 換行超出元素在上方 fle...
微信小程式 flex布局
flex布局的特點 伸縮容器 使用display block 預設值 的 flex row style display block flex view item 1 view flex view item 2 view flex view item 3 view view 可以從效果圖看到block...
微信小程式之flex布局
flex布局 flex布局的特點 設有display flex或者display block的元素就是乙個flex container 伸縮容器 裡面的子元素稱為flex item 伸縮專案 flex container中子元素都是使用flex布局排版。display flex 指定為行內容器模式，...