小程序佈局簡介

1. 幾種常見的佈局

/* 水平佈局 */
.rowLayout {
  display: flex;
  flex-direction: row;
}

/* 垂直佈局 */
.columnLayout {
  display: flex;
  flex-direction: column;
}

/* 水平居中 */
.rowcenter {
  justify-content: center;
  display: flex;
}

/* 垂直居中 */
.columncenter {
  align-items: center;
  display: flex;
}

/* 水平垂直都居中 */
.row-column-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*  居左顯示 */
.item-left {
  flex: 1; /* 重要 */
  align-items: center;
}

/* 居中顯示 */
.item-right {
  position: relative;
  align-items: center;
}

2. 常用的對齊方式如下

text-align:center;
align-items:center;
justify-content: center;
margin: auto; #子容器在父容器中居中

3. 微信小程序文字水平垂直居中對齊問題

.td {
  display: flex;
  align-items: center;
  justify-content: center;
}

4. 顯示在屏幕底部

//給該view設置這倆屬性
position:fixed; 
bottom:0; 

參考鏈接：https://blog.csdn.net/julystroy/article/details/85684454

5.自適應高度，可以在 onLoad 中添加如下代碼，動態設置，xml中引用

wx.getSystemInfo({
  success: function(res) {
	var clientHeight = res.windowHeight,
	  clientWidth = res.windowWidth,
	  rpxR = 750 / clientWidth;
	var height = clientHeight* rpxR ;  //自定根據百分比轉換爲 rpx
	that.setData({
	  contentHeight: height
	});
  },
})

6. display屬性

display:none 不顯示
display:inline 行內顯示
display:block（[塊內]容器模式） 換行顯示
display:inline-block 行內顯示
display：flex 彈性佈局

注意事項
1、display:inline和display:inline-block 雖然顯示效果是一樣的。
不同點：display:inline設置寬、高無效 display:inline-block設置寬、高有效
2、display:block 設置寬、高有效
3、flex相關的屬性

1）flex-direction：row：水平排列 row-reverse：水平翻轉排列
column：豎直排列 column-reverse：豎直翻轉排列
2）flex-wrap ：nowrap（不換行，默認值） wrap（換行） wrap-reverse（與wrap的效果相反）

詳情參考鏈接：
https://www.jianshu.com/p/9736683ce032
https://blog.csdn.net/u013673799/article/details/70157294/

7. position

position: relative，在保留自己原來的位置不變的情況下，在原來的位置中進行偏移。
position: absolute，並沒有保留原來的位置，並且座標偏移是以最近的父視圖爲準進行偏移。
position:fixed， 類似於將position 設置爲absolute，不過其包含塊是視窗本身。

參考鏈接：https://www.jianshu.com/p/993737730753