flex布局 居中
Posted lsongyang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了flex布局 居中相关的知识，希望对你有一定的参考价值。
display:flex;
justify-content: center;检查侧轴是否居中，比如古代竖着写字，检查字是否在每条竹简的中央。
display:flex;
align-items: center;检查横轴是否居中，比如现代人是横着写字，检查字是否写在上下横线的中间。
display:flex;
justify-content: center;
align-items: center;
---------------------------------------------------------------------------------------------------------------
flex布局中align-items 和align-content的区别。align-items和align-content有相同的功能，不过不同点是它是用来让每一个单行的容器居中而不是让整个容器居中。align-content属性只适用于多行的flex容器。有点难懂，关键词：单行多行，看实例。
对于只有一行的flex元素，align-content是没有效果的，如果改用align-items:center;则会达到预期的效果，如下图
但如果变成多行容器 使用align-items时效果如下
使用align-content效果如下
以上是关于flex布局 居中的主要内容，如果未能解决你的问题，请参考以下文章
React Native 中的 Flex Box 的用法（水平布局垂直布局水平居中垂直居中居中布局）