微信小程序居中和横向布局纵向布局

微信小程序居中、居右、横纵布局

1、子控件水平垂直居中

  display: flex;
  align-items: center;//子控件水平居中
  justify-content: center;//子控件垂直居中
  width: 100%;
  height: 400px
  //注意：这里的 height 写 100%会使得垂直居中可能会不生效

2、微信小程序横向布局、纵向布局

横向布局

display: flex;
flex-direction: row;

纵向布局

display: flex;
flex-direction: column;

3、控件居右

父类控件中

position: relative; /*父元素位置要设置为相对*/

子类控件居右显示

position: absolute; /* 要约束所在位置的子元素的位置要设置成绝对 */
right: 0; /* 靠右调节 */
margin-right: 35rpx