在 CSS 布局中，Flexbox 是最常用的弹性布局模型之一。如果我们希望容器里的 Flex 项目全部靠开头对齐，也就是沿着主轴从起始位置依次排列，只需要正确设置容器属性即可。这种方式常用于顶部导航、按钮组等场景。
一、核心属性说明
要实现开头对齐，主要依赖以下两个 CSS 属性：
- display: flex：将容器定义为弹性盒子。
- justify-content: flex-start：定义项目在主轴上的对齐方式，flex-start 表示靠起始端对齐。
二、基础代码示例
下面是一个最简单的例子，容器中的三个项目会紧贴左上角（默认主轴为水平方向）排列：
.container {
display: flex;
/* 主轴默认是 row，开头在左侧 */
justify-content: flex-start;
border: 1px solid #ccc;
padding: 8px;
}
.item {
width: 60px;
height: 60px;
background: #42b983;
margin-right: 8px;
}
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
三、纵向排列时的开头对齐
当我们将 flex-direction 设置为 column 时，主轴变为垂直方向，此时 flex-start 会让项目从容器顶部开始排列：
.container {
display: flex;
flex-direction: column;
justify-content: flex-start;
height: 200px;
border: 1px solid #ccc;
}
四、注意事项
1. 默认值其实就是 flex-start
如果不写 justify-content，浏览器默认取值就是 flex-start，所以有时你“什么都没做”项目也已经开头对齐了。
2. 与 align-items 的区别
justify-content 控制主轴对齐，align-items 控制交叉轴对齐。若容器是 row，想让项目在顶部对齐交叉轴，应使用 align-items: flex-start。
| 属性 | 作用轴 | 开头对齐取值 |
|---|---|---|
| justify-content | 主轴 | flex-start |
| align-items | 交叉轴 | flex-start |
五、小结
使用 CSS 将容器开头的 Flex 项目对齐，本质就是利用 display: flex 配合 justify-content: flex-start。只要分清主轴方向，就能准确控制项目从哪一端开始排布，写出简洁稳定的弹性布局。
CSSFlexboxjustify-contentflex-start前端布局修改时间：2026-07-24 18:03:16