css justify-content属性怎么用

2025-10-26
网站建设限时活动促销

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

标签: justify-content

本文地址:https://www.lifejia.cn/news/212484.html

免责声明:本站内容仅用于学习参考,信息和图片素材来源于互联网,如内容侵权与违规,请联系我们进行删除,我们将在三个工作日内处理。联系邮箱:cloudinto#qq.com(把#换成@)