微信小程序——flex弹性布局水平垂直居中

最新推荐文章于 2024-12-03 18:59:15 发布

喜欢听风的人

最新推荐文章于 2024-12-03 18:59:15 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： android

本文链接：https://blog.youkuaiyun.com/wangqing830414/article/details/109449075

android 专栏收录该内容

74 篇文章 ¥9.90 ¥99.00

订阅专栏

本文介绍了如何使用微信小程序中的flex弹性布局，详细讲解了如何通过此布局方式实现元素的水平和垂直居中。同时，提供了一个flex布局的完整教程链接，帮助开发者深入理解这一技巧。

在这里插入图片描述
实现最终效果

<!--index.wxml-->
<view class="body">
  <view class="out">
    <view class='in'>
      <text>in</text>
    </view>
  </view>
</view>

/**index.wxss**/
.body{
  display: flex;
  justify-content: center;  /* 水平居中 */
  align-items: center;  /* 垂直居中 */
}

.out {
  width: 400rpx;
  height: 300rpx;
  background-color: blue;
  display: flex;
  justify-content: center;  /* 水平居中 */
  align-items: center;  /* 垂直居中 */
}

.in {
  width: 150rpx;
  height: 100rpx;
  background-color: red;
}

text{
  font-size: 28px;
  display: flex;
  justify-content: center;  /* 水平居中 */
  align

了解本专栏