💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
# flex 容器主轴项目对齐 ## 1. `justify-content`属性 > 当容器中主轴方向上存在剩余空间时, 该属性才有意义 | 序号 | 属性值 | 描述 | | ---- | ---------------- | ------------------------------------------------ | | 1 | `flex-start`默认 | 所有项目与主轴起始线对齐 | | 2 | `flex-end` | 所有项目与主轴终止线对齐 | | 3 | `center` | 所有项目与主轴中间线对齐: 居中对齐 | | 4 | `space-between` | 两端对齐: 剩余空间在头尾项目之外的项目间平均分配 | | 5 | `space-around` | 分散对齐: 剩余空间在每个项目二侧平均分配 | | 6 | `space-evenly` | 平均对齐: 剩余空间在每个项目之间平均分配 | --- ## 示例 ![](https://img.kancloud.cn/bd/c2/bdc28d99694246843a21f655098e7e0b_393x236.jpg) ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>flex 容器主轴项目对齐</title> <style> /* 容器尺寸 */ .container { width: 300px; height: 150px; } /* flex容器 */ .container { display: flex; } /* flex 容器主轴项目对齐*/ /* 当容器中主轴方向上存在剩余空间时, 该属性才有意义 */ .container { /* 默认: 所有项目与主轴起始线对齐 */ justify-content: flex-start; /* 所有项目与主轴终止线对齐 */ justify-content: flex-end; /* 所有项目与主轴中间线对齐: 居中对齐 */ justify-content: center; /* 两端对齐: 剩余空间在头尾项目之外的项目间平均分配 */ justify-content: space-between; /* 分散对齐: 剩余空间在每个项目二侧平均分配 */ justify-content: space-around; /* 平均对齐: 剩余空间在每个项目之间平均分配 */ justify-content: space-evenly; } /* flex项目 */ .item { width: 50px; height: 50px; background-color: lightcyan; font-size: 1.5rem; } </style> </head> <body> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div> </body> </html> ```