css中justify-content属性的使用方法-创新互联

css中justify-content属性的使用方法？这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容，让我们一起来看看吧！

css justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，对齐方式有：位于容器的开头、位于容器的结尾、位于容器的中心、均匀分布等等。

css justify-content属性怎么用？

justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。可以使用 align-content 属性对齐交叉轴上的各项（垂直）。

语法：

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

属性值：

●　flex-start：默认值。项目位于容器的开头。

●　flex-end：项目位于容器的结尾。

●　center：项目位于容器的中心。

●　space-between：项目位于各行之间留有空白的容器内，即均匀分布在线上; 第一项是在起始行，最后一项是在结束行。

●　space-around：项目位于各行之前、之间、之后都留有空白的容器内。

●　initial：设置该属性为它的默认值。

●　inherit：从父元素继承该属性。

css justify-content属性 示例

  
1
  
2
  
3
  
4
  
5


  
1
  
2
  
3
  
4
  
5


  
1
  
2
  
3
  
4
  
5


  
1
  
2
  
3
  
4
  
5


  
1
  
2
  
3
  
4
  
5


  
1
  
2
  
3
  
4
  
5

效果图：

说明：

红色列表是justify-content属性设置为 flex-start

黄色是justify-content属性设置为 flex-end

蓝色是justify-content属性设置为 center

绿色是justify-content属性设置为 space-between

粉红色是justify-content属性设置为 space-around

浅绿色是justify-content属性设置为 space-evenly

感谢各位的阅读！看完上述内容，你们对css中justify-content属性的使用方法大概了解了吗？希望文章内容对大家有所帮助。如果想了解更多相关文章内容，欢迎关注创新互联网站制作公司行业资讯频道。