小程序布局简介

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