微信小程式——UI精講

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。定義完只有內容填充才顯示背景顏色。其中對高height：100%，width：100%。解決辦法是對上級目錄pages進行定義高度height：100%。

  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-shrink

flex-shrink 空間不足時按比例縮小，預設 flex-shrink:1不縮小。隨著數值增大縮小。

flex-basis

flex-basis元素在主軸上佔據的空間，由於微信的解析程度不夠導致flex-basis失效，故這裡不用rpx，而是px

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

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

flex

flex是grow shrink basis 的簡寫

flex: 0 1 150px; 例項1

flex:2 1 50px 例項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>

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;
}