通过flex布局实现横向纵向布局并使内容垂直居中

最新推荐文章于 2025-03-03 11:20:36 发布

偷轮子

最新推荐文章于 2025-03-03 11:20:36 发布

阅读量6.2k

点赞数 1

分类专栏：微信小程序

本文链接：https://blog.csdn.net/qq_20411471/article/details/110643945

版权

微信小程序专栏收录该内容

27 篇文章

订阅专栏

1.test.wxml

<view class="content">
  <view class="left"><view>left</view></view>
  <view class="middle">middle</view>
  <view class="right">
    <view class="item">2</view>
  <view class="item">3</view>
  <view class="item">4</view>
  </view>
</view>

2.css文件

.content {
  display: flex;
  flex-direction: row;
}

.left {
  flex: 1;
  display: flex;
  align-items: center;//垂直居中
  justify-content: center;//水平居中
}

.left view {
  background-color: yellow;
}

.middle {
  background-color: blue;
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.right {
  background-color: brown;
  display: flex;
  flex-direction: column;
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}