关于align-items属性的基本用法可以参阅CSS align-items一章节。
本文仅对baseline属性值做一下介绍,因为它有点与众不同,尽管它出场机会可能相对少一些。
此属性值表示基线对齐,代码实例如下:
[HTML] 纯文本查看 复制代码运行代码<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> ul{ width: 400px; height: 150px; background-color: #ccc; display: flex; align-items:baseline; } ul li { width:100px; height: 100px; text-align: center; line-height: 100px; margin: 10px; background-color: pink; list-style:none; } li:last-child { line-height: 150px; } </style> </head> <body> <ul> <li>x</li> <li>y</li> <li>z</li> </ul> </body> </html>
代码运行效果截图如下:
规定align-items属性值baseline,规定基线对齐。
也就是元素中的文本都以第一个元素的文本的基线对齐。
简单做一个基线示意图如下:
前端教程
HTML5 API
鲁ICP备10022556号-3
鲁公网安备 37021302000666号
关于我们
|手机版|小黑屋|
Copyright © 2012-2020 Design: 蚂蚁部落
最新评论