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;
}