view-flex

1.flex-direction

flex-direction有兩個屬性，默認屬性flex-direction-row從左到右，flex-direction-row-reverse從右往左。
flex-direction: column從上往下，flex-direction: column-reverse從下往上。

.container{
  height: 100%;
  width:100%;
  background-color:aqua;
    display: flex; /*默認row屬性交叉軸從左往右*/ 
  /* flex-direction: column-reverse;從下往上 */
  /* flex-direction: column; 從上往下*/
  /* flex-wrap: wrap;上方拆開排列 */
  /* flex-wrap: wrap-reverse;下方拆開排列 */
}

下方拆開排列

我在對View視圖容器進行格式背景顏色定義background-color。定義完只有內(nèi)容填充才顯示背景顏色。其中對高height：100%，width：100%。解決辦法是對上級目錄pages進行定義高度height：100%。

flex布局內(nèi)容不能填充背景，說明是浮動在View上

這里是對pages配置過

  page{ 
  height: 100%
} 

flex-flow是flex-direction和flex-wrap的簡寫

justify-content

justify-content，主軸上的對齊方式，有五個屬性
justify-content-center/ flex-start/flex-end/space-around/space-between，居中/左對齊（默認）/右對齊/分散對齊（等距）/兩端對齊

主軸和交叉軸

兩端對齊

分散對齊

align-items

align-items交叉軸對齊方式，有六個屬性。
align-items：flex-start/flex-end/center/stretch/baseline,頂部對齊/底部對齊/居中對齊/（元素沒有定義高都占滿整個容器交叉軸方向）填充/元素文字對齊

頂部對齊

底部對齊

居中

填充

元素文字對齊

flex-grow:

flex-grow:當有多余空間時，元素的放大比例
flex-grow:0；不放大 flex-grow:1；放大各占取一份

放大各占取一份

flex-grow:2占取了兩份

flex-shrink

flex-shrink 空間不足時按比例縮小，默認 flex-shrink:1不縮小。隨著數(shù)值增大縮小。

flex-shrink:1不縮小

flex-shrink:2

flex-basis

flex-basis元素在主軸上占據(jù)的空間，由于微信的解析程度不夠?qū)е耭lex-basis失效，故這里不用rpx，而是px

.i3{
 display: flex;
  align-items: flex-end;
  /* flex-grow:2; */
  flex-shrink:1;
  flex-basis: 150px;
}

對比1

.i3{
 display: flex;
  align-items: flex-end;
  /* flex-grow:2; */
  flex-shrink:1;
  flex-basis: 10px;
}

對比2

flex

flex是grow shrink basis 的簡寫

flex: 0 1 150px; 實例1

實例1

flex:2 1 50px 實例2

實例2

order

order定義元素的排列順序

<view class='container'>
    <view class='item1' style='order:2'>1</view>
   <view class='item1' style="order:1">2</view> 
    <view class='item1 i3'style="order:4">3</view> 
     <view class='item1'style="order:3">4</view>
    
</view>

order元素排列

align-self

align-self定義元素自身對齊方式

.i3{
 display: flex;
  /* align-items: flex-end; */
  /* flex-grow:2; */
  /* flex-shrink:1;
  flex-basis: 10px; */
  /* flex: 2 1 50px; */
  align-self:flex-end;
}

align-self:flex-end