答案：通过嵌套Flex容器实现混合对齐，外层居中、内层靠左。示例中.container设justify-content: center居中，.left-items用margin-right: auto推至左侧，实现左对齐与居中并存的布局效果。
在使用 Flexbox 布局时，justify-content 只能设置为一个值，不能直接“组合” flex-start 和 center。但如果你希望实现某些子元素靠左对齐、另一些居中对齐的视觉效果，可以通过嵌套容器的方式间接实现。
方法：使用嵌套 flex 容器
将父容器设为居中对齐，内部再用一个子容器包裹需要靠左排列的元素，通过控制内外容器的 justify-content 实现混合布局。
示例代码：
项目1项目2居中项目
.container {
display: flex;
justify-content: center; /* 整体内容居中 */
gap: 20px;
height: 100px;
background-color: #f0f0f0;
}
.left-items {
display: flex;
justify-content: flex-start; /* 左侧项目靠左 */
margin-right: auto; /* 推向最左边 */
}
.item, .centered-item {
padding: 10px;
background-color: #007bff;
color: white;
text-align: center;
}关键点说明
这个方法的核心在于：
立即学习“前端免费学习笔记（深入）”；
- 外层容器居中：让整体布局以中心为基准
- 左侧盒子使用 margin-right: auto：将其固定在左边，同时把右侧内容“挤”向中心
- 灵活扩展：可添加更多分组，如右边也加内容
适用场景
这种结构适合导航栏、仪表盘头部等需要混合对齐方式的界面。虽然不能直接组合两个 justify-content 值，但通过合理嵌套，完全可以实现视觉上的混合对齐效果。
基本上就这些，关键是理解 flex 的空间分配机制和 margin:auto 在 flex 子元素中的特殊作用。
