justify-content容器属性

Loading

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：项目是分布的，以便任何两个项目之间的间距（和边缘的空间）相等。

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