justify-content容器属性

最新推荐文章于 2025-10-01 22:54:27 发布

转载最新推荐文章于 2025-10-01 22:54:27 发布 · 641 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/qq_44607694/article/details/89761329

文章标签：

#容器 #css3 #css

本文详细介绍了CSS flexbox布局中的justify-content属性，包括其六种对齐方式：flex-start、flex-end、center、space-between、space-around和space-evenly，并展示了如何在实际项目中使用这些对齐方式来调整元素布局。

justify-content容器属性

justify-content属性定义了项目在主轴上的对齐方式。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

在这里插入图片描述

这定义了沿主轴的对齐。当线路上的所有弹性项目都不灵活，或者灵活但已达到其最大尺寸时，它有助于分配剩余的额外空闲空间。当它们溢出线时，它还对物品的对齐施加一些控制。

它可能取6个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
space-evenly：项目是分布的，以便任何两个项目之间的间距（和边缘的空间）相等。

————————————————
版权声明：本文为优快云博主「巧克力很苦」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/qq_44607694/article/details/89761329