flex 布局实现垂直居中和水平居中

在微信小程序中可以放心地使用 flex 布局，所以尝试了一下 flex 的居中布局。

示例模板代码

<view class="nav_icon_wrapper">
  <image src="../../images/phone.png" mode="widthFix"></image>
</view>
<view class="nav_text_wrapper">
  <text>手机认证</text>
</view>

示例样式代码

只需要在父级元素上设置，不需要操作子元素。

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

.nav_text_wrapper {
  display: flex;
  align-items: center;
}

align-items 与 justify-content 如何记忆

我发现这两个属性，我完全记不住，之前看过好多遍，每次用都要重新查。首先从词面意思上我就区分不开。

于是我采用了应付考试的死记方法：

• justify 这个单词，字母较多。所以是水平居中。
• align 字母较少。所以是垂直居中。。。

感觉这个方法太土鳖了。我最终 Google 了一下 "align justify diff"，没想到排名第一的答案居然是跟我出奇的一致。。。

老外英语也不行啊！

tags: flex 布局 flex布局实现上下左右都居中

关于作者 🌱

我是来自山东烟台的一名开发者，有敢兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式