Justify Content
CSS justify-content 属性定义浏览器如何沿着弹性容器的主轴和网格容器的行向轴分配内容元素之间和周围的空间。
语法
| Class | 属性 | 描述 |
|---|---|---|
| justify-center | justify-content: center; | 元素紧密地排列在主轴方向居中对齐 |
| justify-start | justify-content: flex-start; | 元素紧密地排列在容器主轴起始侧 |
| justify-end | justify-content: flex-end; | 元素紧密地排列在容器主轴结束侧 |
| justify-between | justify-content: space-between; | 在主轴上均匀分配元素。相邻元素间距离相同 |
| justify-around | justify-content: space-around; | 元素沿着主轴均匀分布在容器中 |
| justify-items | justify-content: center;align-items: center; | 元素沿着X轴和Y轴垂直居中 |
示例
justify-center
元素紧密地排列在主轴方向居中对齐
justify-start
元素紧密地排列在容器主轴起始侧
justify-end
元素紧密地排列在容器主轴结束侧
justify-between
在主轴上均匀分配元素。相邻元素间距离相同。第一个元素与主轴首对齐，最后一个元素与主轴尾对齐
justify-around
元素沿着主轴均匀分布在容器中。相邻项之间的间距，主轴起始位置到第一个元素的间距，主轴结束位置到最后一个元素的间距，都完全一样
justify-items
元素沿着X轴和Y轴垂直居中