CSS align-self

admin發表於2019-04-16
CSS

關於彈性佈局的基本介紹可以參閱display:flex 彈性佈局一章節。

上述文章雖有涉及，但非常簡略，本文再通過程式碼例項詳細介紹一下此屬性的用法。

只要掌握了align-items屬性，那麼基本就掌握align-self屬性的用法。

兩個屬性的主要異同點如下：

（1）.兩個屬性都是用來規定專案在所在行中，容器交叉軸方向上的對齊方式。

（2）.align-items屬性在容器元素上設定，作用於所有專案，是面的設定。

（3）.align-self屬性在專案元素上設定，作用於當前專案，是點的設定。

align-self屬性用於設定單個專案在行中容器交叉軸方向的對齊方式。

上文概念闡述中，多次提到"行"的概念，實質上此屬性規定的是專案在行中的對齊方式。

關於行的概念本文不做介紹，具體可以參閱align-items與align-content區別一章節。

此屬性所設定的屬性值會覆蓋通過align-items屬性設定的值。

語法結構：

[CSS] 純文字檢視 複製程式碼
align-self: auto|stretch|center|flex-start|flex-end|baseline

屬性值說明：

（1）.auto：預設值，繼承彈性容器的align-items屬性值，如果彈性容器未設定align-items，預設值為stretch。

（2）.stretch：規定專案被拉伸以使用容器在交叉軸上的尺寸。

（3）.center：規定專案在行中交叉軸方向居中對齊。

（4）.flex-start：規定專案在行中交叉軸方向起始位置對齊。

（5）.flex-end：規定專案在行中交叉軸方向結束位置對齊。

（6）.baseline：規定專案在所在行中基線對齊。

瀏覽器相容：

（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: 300px;
  height: 200px;
  background:#ccc;
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
}
#main div {
  margin-left:10px;
  width: 70px;
  height:70px;
}
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;align-self:center"></div>
  <div style="background-color:green;"></div>
  <div style="background-color:blue;"></div>
  <div style="background-color:red;"></div>
  <div style="background-color:yellow;"></div>
</div>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201904/16/235706dqqiionmmnzzcsin.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.通過align-items屬性設定專案拉伸，但是由於專案設定的固定寬度，所以專案本身沒有拉伸效果。

（2）.在第一個專案中設定align-self:center，於是第一個專案在其所在的行中居中對齊。

（3）.align-items屬性設定在容器元素，對所有專案有效，align-self直接設定在專案本身之上。

（4）.說明align-items是對"面"的設定，而align-self則是"點"的設定。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style> 
#main {
  width: 300px;
  height: 200px;
  background:#ccc;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
}
#main div {
  margin-left:10px;
  width: 70px;
  height:70px;
}
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:green;align-self:flex-end;"></div>
  <div style="background-color:blue;"></div>
  <div style="background-color:red;"></div>
  <div style="background-color:yellow;"></div>
</div>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201904/16/235722stqfno5pf0r0o5rp.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.通過align-items屬性設定所有專案在所在行中交叉軸方向頂端對齊。

（2）.然後再通過align-self屬性設定第二個專案在所在漢中交叉軸方向低端對齊。

特別說明：

（1）.再強調一下，設定的是專案在所在行中的對齊方式或者說空間分配方式。

（2）.具體原理本文不再介紹，具體參閱align-items與align-content區別一章節。

相關文章