css flexbox布局与对齐属性_使用justify-content与align-items

justify-content 控制主轴对齐，align-items 控制交叉轴对齐；二者均作用于 flex 容器，需确保父容器有明确尺寸且正确声明 display:flex 和 flex-direction。

justify-content 控制主轴方向的对齐方式

它只作用于 flex 容器，决定子元素在主轴（flex-direction 决定）上的分布位置。常见值有 flex-start、center、space-between 等，但要注意：如果容器没有设定明确宽度（或高度，取决于主轴方向），space-around 或 space-evenly 可能看起来“没效果”，因为 浏览器 按内容撑开容器后，剩余空间为 0。

使用时需确认两点：

• display: flex 已在父容器上声明
• flex-direction 的值（默认 row，主轴为水平；设为 column 后主轴变垂直，justify-content 就控制上下对齐）

.container {display: flex;   flex-direction: row; /* 主轴水平 */   justify-content: space-between;}

align-items 控制交叉轴方向的单行对齐

它也作用于 flex 容器，但影响的是交叉轴（与主轴垂直的方向）上所有子项的对齐。例如主轴是 row，交叉轴就是垂直方向，align-items: center 就让所有子项 垂直居中。

容易被忽略的关键点：

立即学习 “ 前端免费学习笔记（深入）”；

• align-items 对单行和多行 flex 容器都生效，但仅对“当前行内”的子项起作用；若子项换行（flex-wrap: wrap），每行独立应用该值
• 它不控制子项自身内容的对齐（比如文字在子项内部怎么排），那是子项自己的 text-align 或 align-self 的事
• stretch 是默认值，会让子项在交叉轴方向拉伸填满容器高度（或宽度），若子项设了固定 height 或 min-height，则拉伸失效

.container {display: flex;   align-items: center; /* 所有子项垂直居中（主轴为 row 时）*/}

justify-content 和 align-items 一起用时的常见错觉

很多人以为同时设 justify-content: center 和 align-items: center 就一定能“真正居中”一个元素，结果发现没动。问题往往出在：

• 父容器没有设定尺寸（如 height: 100vh），导致交叉轴长度为 0，align-items 无空间可对齐
• 父容器被其他 CSS（如 margin: auto、浮动、绝对定位）干扰，实际未形成有效 flex 上下文
• 子项本身有 margin 或 padding，视觉上偏移，误以为对齐失效

最简验证方式：给父容器加 border: 1px solid red，看是否真的撑开了；再给子项加 background: cyan，确认它是否真在容器内部。

align-self 覆盖 align-items 的例外情况

当某个子项需要单独对齐，而其他子项保持统一时，用 align-self。它的取值和 align-items 一致（flex-start、center、stretch 等），且优先级更高。

注意：

• align-self 只对 flex 子项生效，普通块级元素无效
• 设为 auto（默认）时，会继承父容器的 align-items 值
• 若父容器 align-items 是 stretch，而某子项设了 align-self: flex-start，该子项就不会被拉伸，哪怕它没设高度

.item.special {align-self: flex-end; /* 单独靠交叉轴末端对齐 */}

flex 布局真正的难点不在属性名，而在主轴 / 交叉轴的动态切换、容器尺寸是否可控、以及子项是否“老实”（有没有溢出、固定尺寸或 margin 干扰）。调的时候先画出主轴箭头，再看容器有没有实际可用空间，比死记属性值管用得多。