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

更新日期: 2020-03-15 阅读次数: 8549 字数: 248 分类: CSS

在微信小程序中可以放心地使用 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",没想到排名第一的答案居然是跟我出奇的一致。。。

老外英语也不行啊!

微信关注我哦 👍

大象工具微信公众号

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

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