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

更新日期: 2020-03-15 阅读次数: 174 字数: 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 布局

相关文章

爱评论不评论

近期节日

2020年04月01日 愚人节
2020年04月02日 国际儿童图书日
2020年04月03日 寒食节
2020年04月04日 清明节
2020年04月07日 世界卫生日
2020年04月11日 世界帕金森病日
2020年04月19日 谷雨
2020年04月21日 复活节
2020年04月22日 世界地球日
2020年04月23日 世界读书日
2020年04月26日 知识产权日
2020年04月30日 佛诞
查看更多节日