align-items:baseline 作用

admin發表於2019-04-20

關於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>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201904/20/010958ae7yidd3de7qka7d.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

規定align-items屬性值baseline，規定基線對齊。

也就是元素中的文字都以第一個元素的文字的基線對齊。

簡單做一個基線示意圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201904/20/011009toroslcoeuabgzs2.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

相關文章