189 8069 5689

怎么用cssalign-items属性

这篇文章运用简单易懂的例子给大家介绍怎么用css align-items属性,代码非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

创新互联主打移动网站、网站建设、网站设计、网站改版、网络推广、网站维护、主机域名、等互联网信息服务,为各行业提供服务。在技术实力的保障下,我们为客户承诺稳定,放心的服务,根据网站的内容与功能再决定采用什么样的设计。最后,要实现符合网站需求的内容、功能与设计,我们还会规划稳定安全的技术方案做保障。

css align-items属性是用于指定float容器内项目在横轴方向的对齐方式:拉伸以填充容器、以横轴为中心、在顶部垂直对齐、在底部垂直对齐、横轴的基线处对齐。

CSS align-items属性

align-items属性是Flexible Box 布局模块的子属性。

作用:定义了如何沿当前行的横轴布置弹性项目的默认(对齐)行为。

注:可以在float容器内的每个子项目中使用align-self属性来覆盖align-items属性的样式。

语法:

align-items: stretch|center|flex-start|flex-end|baseline;

stretch(默认):拉伸以填充容器(仍然尊重最小宽度/最大宽度)。

怎么用css align-items属性

center:项目以横轴为中心;默认情况下,横轴是垂直的,这意味着flexbox项目将垂直居中 。

怎么用css align-items属性

flex-start:项目在横轴的开始处对齐,即项目将在顶部垂直对齐。

怎么用css align-items属性

flex-end:项目在横轴末端对齐,即项目将在底部垂直对齐

怎么用css align-items属性

baseline:项目在横轴的基线处对齐,即flexbox项目将自身对齐,以使其文本的基线沿水平线对齐。

怎么用css align-items属性

CSS align-items属性的使用示例




	
		
		

	

	
		
  • 1
    2
  • 3
  • 4
    5
  • 6
  • 1
    2
  • 3
  • 4
    5
  • 6
  • 1
    2
  • 3
  • 4
    5
  • 6
  • 1
    2
  • 3
  • 4
    5
  • 6
  • 1
    2
  • 3
  • 4
    5
  • 6

效果图:

怎么用css align-items属性

关于怎么用css align-items属性就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


网站题目:怎么用cssalign-items属性
转载来于:http://cdxtjz.com/article/gcgocj.html

其他资讯