CSS align-items

admin發表於2019-04-12
CSS

關於彈性佈局的更多內容可以參閱display:flex 彈性佈局一章節。

CSS彈性佈局涉及的屬性非常多，本文通過程式碼例項詳細介紹一下align-items用法。

align-items屬性用於規定彈性佈局容器中的專案在交叉軸上的排列方式。

特別說明：此屬性應用於彈性佈局的容器元素之上，非彈性佈局環境中無效。

關於專案在主軸上的排列方式可以參閱CSS justify-content一章節。

語法結構：

[CSS] 純文字檢視 複製程式碼
align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

屬性值解析:

（1）.stretch：預設值，彈性佈局容器中的專案會在交叉軸方向拉伸以適應容器。

（2）.center：規定彈性佈局容器中的專案在交叉軸方向上居中對齊。

（3）.flex-start：規定彈性佈局容器中的專案交叉軸起始位置對齊。

（4）.flex-end：規定彈性佈局容器中的專案交叉軸結束位置對齊。

（5）.baseline：規定彈性佈局容器中的專案第一行文字的基線對齊。

（6）.initial：規定彈性佈局容器中的專案預設方式顯示，參閱CSS initial 屬性一章節。

（7）.inherit：從父元素繼承該屬性。

對於上面概念涉及到的幾個概念進行一下簡單介紹：

（1）.只要為元素新增display: flex屬性即可形成一個彈性佈局環境，當前元素就是容器元素。

（2）.容器具有兩條軸線，一條是主軸，一條是交叉軸，預設狀態下，主軸是水平的，交叉軸是垂直的。

（3）.通過CSS flex-direction屬性可以改變主軸的方位，比如由水平修改為垂直。

a:3:{s:3:\"pic\";s:43:\"portal/201904/12/111957sa6b97bj8r8r07is.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

圖示簡單如下：

（1）.main axis表示主軸，cross axis表示交叉軸。

（2）.預設主軸左側為起點，右側為終點，交叉軸上部為起點，底部為終點。

瀏覽器相容：

（1）.IE10+瀏覽器支援此屬性。

（2）.edge瀏覽器支援此屬性。

（3）.火狐瀏覽器支援此屬性。

（4）.谷歌瀏覽器支援此屬性。

（5）.Opera瀏覽器支援此屬性。

（6）.safria瀏覽器支援此屬性。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style> 
#main {
  width: 400px;
  height: 150px;
  background:#ccc;
  display: flex;
  align-items:stretch;
}
#main div {
  text-align:center;
  flex:1;
}
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
</div>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201904/12/112039g2vhl0kexo615l8e.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼說明如下：

（1）.在外層div上應用display: flex屬性，那麼它就成為一個彈性佈局容器元素。

（2）.align-items屬性值應用於容器之上，用來設定容器中專案在交叉軸上的排列方式。

（3）.align-items屬性值為stretch（預設值），規定在交叉軸方位上拉伸專案以適應容器尺寸。

特別說明：如果專案的高度設定了固定尺寸，那麼不會被拉伸，感興趣的朋友可以自行測試一下。

關於flex屬性的用法本文不做介紹，具體可以參閱CSS flex 屬性一章節。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style> 
#main {
  width: 400px;
  height: 100px;
  background:#ccc;
  display: flex;
  align-items:center;
}
#main div {
  text-align:center;
  flex:1;
} 
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
</div>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201904/12/112122whiz4zueflhhvuc7.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼說明如下：

（1）.在外層div上應用display: flex屬性，那麼它就成為一個彈性佈局容器元素。

（2）.align-items屬性值應用於容器之上，用來設定容器中專案在交叉軸上的排列方式。

（3）.align-items屬性值為center，規定在交叉軸方位上專案居中對齊。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style> 
#main {
  width: 400px;
  height: 100px;
  background:#ccc;
  display: flex;
  align-items:flex-start;
}
#main div {
  text-align:center;
  flex:1;
} 
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
</div>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201904/12/112148pjwwwg1j3gws1o3b.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼說明如下：

（1）.在外層div上應用display: flex屬性，那麼它就成為一個彈性佈局容器元素。

（2）.align-items屬性值應用於容器之上，用來設定容器中專案在交叉軸上的排列方式。

（3）.align-items屬性值為flex-start，規定專案以交叉軸起始位置對齊。

（4）.預設狀態下，交叉頂端為起始位置，所以專案頂端對齊。

其他屬性值，後面就不再一一演示，如有任何問題或者建議可以在文章底部留言。

相關文章