Skip to content

Justify Content

CSS justify-content 属性定义浏览器如何沿着弹性容器的主轴和网格容器的行向轴分配内容元素之间和周围的空间。

语法

Class属性描述
justify-centerjustify-content: center;元素紧密地排列在主轴方向居中对齐
justify-startjustify-content: flex-start;元素紧密地排列在容器主轴起始侧
justify-endjustify-content: flex-end;元素紧密地排列在容器主轴结束侧
justify-betweenjustify-content: space-between;在主轴上均匀分配元素。相邻元素间距离相同
justify-aroundjustify-content: space-around;元素沿着主轴均匀分布在容器中
justify-itemsjustify-content: center;align-items: center;元素沿着X轴和Y轴垂直居中

示例

justify-center

元素紧密地排列在主轴方向居中对齐

justify-start

元素紧密地排列在容器主轴起始侧

justify-end

元素紧密地排列在容器主轴结束侧

justify-between

在主轴上均匀分配元素。相邻元素间距离相同。第一个元素与主轴首对齐,最后一个元素与主轴尾对齐

justify-around

元素沿着主轴均匀分布在容器中。相邻项之间的间距,主轴起始位置到第一个元素的间距,主轴结束位置到最后一个元素的间距,都完全一样

justify-items

元素沿着X轴和Y轴垂直居中

参见