网站建设资讯

NEWS

网站建设资讯

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:默认值。项目位于容器的开头。

css中justify-content属性的使用方法

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

css中justify-content属性的使用方法

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

css中justify-content属性的使用方法

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

css中justify-content属性的使用方法

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

css中justify-content属性的使用方法

● 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

效果图:

css中justify-content属性的使用方法

说明:

红色列表是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属性的使用方法大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注创新互联行业资讯频道。


网页标题:css中justify-content属性的使用方法
标题路径:http://njwzjz.com/article/ieoeji.html