justify-content 控制 flex 子项在主轴上的对齐方式，常用值包括：flex-start（左对齐）、flex-end（右对齐）、center（居中）、space-between（两端对齐，间距相等）、space-around（周围间距相等，中间间距为边缘两倍）、space-evenly（完全等距）。实际效果受 flex-direction 影响，需结合主轴方向理解布局行为。
justify-content 是 CSS Flexbox 布局中的一个关键属性，用于控制弹性容器中子元素在主轴（main axis）上的对齐方式。根据不同的取值，可以实现多种布局效果。
flex-start（默认值）
所有子元素向主轴的起点对齐。如果是从左到右的书写模式（如LTR），元素会靠左对齐。
常见于默认布局，无需额外设置即可生效。
flex-end
子元素向主轴的终点对齐。在从左到右的布局中，表现为靠右对齐。
适合需要将内容右对齐的场景，比如操作按钮组。
center
子元素在主轴方向居中对齐，左右留白相等。
立即学习“前端免费学习笔记（深入）”；
常用于标题、卡片或模块的水平居中布局。
space-between
元素之间间距相等，首元素对齐起点，末元素对齐终点。
有道小P，新一代AI全科学习助手，在学习中遇到任何问题都可以问我。
64
查看详情
- 适用于导航栏、分页按钮等需要均匀分布但两端贴边的布局。
- 如果只有一个子元素，效果等同于 flex-start。
space-around
每个元素周围分配相等的间距，因此元素之间的空隙是元素与容器边缘空隙的两倍。
视觉上更“宽松”，适合图标组或选项卡布局。
space-evenly
元素间的间距以及元素与容器边缘的间距完全相等。
比 space-around 更均匀，适合需要严格等距分布的设计。
stretch
该值主要作用于 交叉轴，在 justify-content 中一般不直接体现，但在多行 flex 布局（flex-wrap: wrap）中配合 align-content 使用较多。
注意：justify-content 不会触发 stretch 行为，此值更多由 align-items 控制。
基本上就这些常用取值。实际使用时结合 flex-direction 判断主轴方向，才能准确理解对齐效果。
暂无评论内容