【微信小程序】常用樣式

display:flex; // 彈性佈局
display: block; // 指定爲塊內窗口模式 小程序 view 默認是這種模式

主軸和側軸

• flex-direction:
  • row; // 從左到右的水平方向
  • row-reverse; // 從右到左的水平方向
  • colunm; // 從上到下的垂直方向
  • colunm-reverse; // 從下到上的垂直方向

對齊方式：主軸（橫）justify-content、側軸（豎）align-items

• justify-content:

  • flex-start; // 左對齊
  • flex-end; // 右對齊
  • center; // 居中對齊
  • space-between; // 兩端對齊
  • space-around; // 每個元素之間的距離相等

• align-items:

  • stretch; // 填充整個容器
  • flex-start; // 起點對齊
  • flex-end; // 終點對齊
  • center; // 居中對齊
  • baseline; // 第一行文字對齊

設置彈性盒子模型：

.container {
    display:flex; /* 設置爲彈性佈局 */
    flex-direction: column; /* 按照垂直方向排版 */
    flex-direction: row; /* 按照水平方向排版 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

佈局設置寬度和高度：（根據系統獲取屏幕的寬度和高度進行佈局）

圖片佔滿全屏：

page {
    height: 100%;
}
.image {
    height: 100%;
    width: 100%;
}

背景漸變：

page {
    background: linear-gradient(45deg, red, blue);
}

去掉小程序自帶按鈕樣式：

button::after {
    border:0; /* border:none; */
    background-color: none;
}

設置view透明度：
水平一行佈局：
水平兩列布局：

.two {
  	display:flex;
  	flex-direction:row;
  	flex-wrap:wrap;
  	align-content:center;
  	justify-content:space-around;
  	height:70vh;
}
.two .area {
   width:46vw;
   text-align: center;
}

wxml
<view id='two'>
  <view class='area'>
      <image mode="widthFix" src='../assets/images/ttt.jpg' style='background:#faa33a;width:100%;' />
      <text>左邊內容</text>
  </view>
    <view class='area'>
      <image mode="widthFix" src='../assets/images/aaa.jpg' style='background:#faa33a;width:100%;' />
      <text>左邊內容</text>
  </view>
</view>