• flex-direction屬性決定主軸的方向

  • flex-direction: row; 主軸為水平方向，起點在左端。
  • flex-direction: row-reverse;主軸為水平方向，起點在右端。
  • flex-direction: column;主軸為垂直方向，起點在上沿。
  • flex-direction: column-reverse;主軸為垂直方向，起點在下沿。

• justify-content屬性定義了專案在主軸上的對齊方式。
  justify-content: flex-start | flex-end | center | space-between | space-around;

• 兩種居中對齊：
  align-items: center; //水平
  justify-content:center; //垂直.

• 背景色從左到右漸變

background-image: linear-gradient(124deg, 
        #5db5f3 0%, 
        #5c8cef 100%), 
    linear-gradient(
        #ffffff, 
        #ffffff);
    background-blend-mode: normal, 
        normal;

• 重疊佈局：

父元件
{
  z-index
 
: 10;
  position:absolute;
  top:0;
}
子元件：
{
position:fixed;
}

• 小程式button元件
  
  • 設定透明，無邊框,分享按鈕

wxml:
        <button  open-type="share" class = "sharePage" plain ="true" style="border:none;"   >分享</button>

    wxss:
    .sharePage{
          position:fixed;
          display:block;
          margin-left
 
:80%;
          width: 100rpx;
          height: 100rpx;
          background-color:transparent;
    }

• 上邊框線
  margin-top:20rpx;
  border-top:10rpx solid #f2f1f8;

• 居中佈局
  

text-align:center;
flex-direction:column;
align-items:center;
display:flex;

• 背景圖片平鋪不重複設定

background-image:url();
background-repeat:no-repeat;
background-size:100% 100%;