justify-content用于设置Flexbox主轴上子元素的对齐方式,其值包括flex-start(默认左对齐)、flex-end(终点对齐)、center(居中)、space-between(首尾贴边,中间等距)、space-around(两侧间距相等)和space-evenly(整体等距),结合display: flex与flex-direction可实现灵活布局,常用于导航栏或垂直排列等场景。

justify-content 是 CSS 中用于控制 Flexbox 布局主轴(main axis)上子元素对齐方式的属性。它决定了容器内子元素在主轴方向上的分布和位置。
基本作用
当使用 display: flex 启用弹性布局后,justify-content 可以调整所有子元素在主轴上的排列方式。主轴的方向由 flex-direction 决定,默认是横向从左到右。
常用取值
- flex-start:子元素向主轴起点对齐(默认值)
- flex-end:子元素向主轴终点对齐
- center:子元素在主轴居中对齐
- space-between:子元素均匀分布,首尾两个元素分别贴住两端,中间间距相等
- space-around:每个元素两侧的间隔相等,因此中间的间隙比两边大
- space-evenly:所有元素之间的间距完全相等
实际应用示例
比如有一个横向排列的导航菜单:
.container {
display: flex;
justify-content: space-between;
}
这时菜单项会均匀分布在容器两端,适合做头部布局。
本文档主要讲述的是关于Objective-C手动内存管理的规则;在ios开发中Objective-C 增加了一些新的东西,包括属性和垃圾回收。那么,我们在学习Objective-C之前,最好应该先了解,从前是什么样的,为什么Objective-C 要增加这些支持。有需要的朋友可以下载看看
立即学习“前端免费学习笔记(深入)”;
如果主轴是垂直方向(flex-direction: column),那么 justify-content 就会在纵向起作用。
基本上就这些,掌握它能快速实现常见的水平或垂直对齐需求。









