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

更新日期: 2020-03-15 阅读次数: 533 字数: 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",没想到排名第一的答案居然是跟我出奇的一致。。。

老外英语也不行啊!

领取618阿里云/腾讯云服务器优惠券

关于作者

我是来自山东烟台的一名开发者,喜欢瞎折腾,顺便记记笔记。有敢兴趣的话题,欢迎加微信 zhongwei 聊聊。 白天写程序,晚上哄熊孩子,可能回复有点慢,见谅。 查看更多联系方式

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

相关文章

爱评论不评论

近期节日

2020年06月05日 世界环境日
2020年06月05日 芒种
2020年06月06日 全国爱眼日
2020年06月11日 中国人口日
2020年06月20日 世界难民日
2020年06月21日 父亲节
2020年06月21日 夏至
2020年06月22日 中国儿童慈善活动日
2020年06月23日 国际奥林匹克日
2020年06月25日 全国土地日
2020年06月25日 端午节
2020年06月26日 国际禁毒日
查看更多节日