微信小程序 布局对齐属性

1、效果展示

2、代码展示

<!-- 引用模板 import -->

<view class="content" >

<view class="content-item" style="background: skyblue" > 1</view>

<view class="content-item" style="background: #ff0000" > 2</view>

<view class="content-item" style="background: #000; color:#fff" > 3</view>

</view>

/* pages/qq/qq.wxss */

.content{

width: 750 rpx;

/* 弹性布局 伸缩 */

display: flex;

/* 横轴 排列 */

flex-direction:column ;

 /* 数竖直方向 右对齐  */

align-items: flex-end;

}

.content-item{

  width: 230rpx;

  height: 150rpx;

  display: flex;

  /* 水平方向  */

  justify-content:center;

  /* 竖直方向*/

  align-items: center;

}