如何区分使用justify-content、align-items与text-align三类CSS属性

快速判断逻辑 #

你可以按照2步快速定位要用的属性：

1. 先判断你要控制的目标是不是行内内容/文本，如果是，直接用text-align就可以：
   • text-align作用在块级父元素上，专门控制内部的文本、图片、行内块这类行内级元素的水平对齐，和flex布局没有任何关系
2. 如果父元素已经开启了display: flex，要控制flex子元素的对齐，就记牢flex布局的核心规则：主轴对应justify-content，交叉轴对应align-items
   • 默认flex主轴为水平方向（flex-direction: row）时：justify-content控制子元素水平对齐，align-items控制子元素垂直对齐
   • 如果修改主轴为垂直方向（flex-direction: column）时：justify-content控制子元素垂直对齐，align-items控制子元素水平对齐

注意：justify-content和align-items都是写在flex父容器上的属性，不需要写在子元素上。

速查表 #

常见场景示例 #

• 普通卡片内的标题文字水平居中：给卡片加text-align: center
• flex布局的导航栏选项左右贴边排列：给导航父容器加display: flex; justify-content: space-between
• flex容器内的子元素垂直居中：给flex父容器加align-items: center
• flex容器内的子元素同时水平+垂直居中：给父容器加display: flex; justify-content: center; align-items: center

内容的提问来源于stack exchange，提问作者Ping Souravghosh