align-items與align-content區別

admin發表於2019-04-16

關於標題中兩個屬性的基本用法本文不再介紹，具體可以參閱如下兩篇文章：

（1）.align-items屬性可以參閱CSS align-items 屬性一章節。

（2）.align-content屬性可以參閱CSS align-content 屬性一章節。

兩個屬性的功能極為相似，甚至在有些時候兩者的表現完全一樣，具有很強的迷惑性：

（1）.兩個屬性都可以用於設定專案在交叉軸上的對齊方式。

（2）.存在相同的屬性值，並且這些屬性值在某些時候表現完全相同。

網路上有不少的優秀的文章對兩個屬性的區別進行了分析，給出的結論基本是一致的。

那就是align-content用於多行容器元素，對於單行容器元素無效，結論確實如此，不過大多沒有涉及其中的原理。

本文再結合程式碼例項從原理方面對兩個屬性的區別進行一下詳細分析，希望能夠給需要的朋友帶來一定的幫助。

一.多行容器與單行容器：

彈性容器可以劃分為多行容器和單行容器，劃分方式如下：

（1）.容器的flex-wrap屬性值為wrap或者wrap-reverse的容器是多行容器。

（2）.只要進行上述屬性設定，即便容器中只有一個行專案，也是多行容器。

（3）.多行容器中，每一行在交叉軸方向上的尺寸，恰好能夠包裹住專案。

（4）.當行容器中，只有一個行，此行在交叉軸上的尺寸等同於容器在交叉軸上的尺寸。

多行容器行高圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201904/16/171035v9li0pu9llw0p997.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

單行容器行高圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201904/16/171044wd9tc10cn3de6b0o.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面圖示已經很清晰的說明了兩類容器中的行高，不再進一步說明。

二.區別原理分析：

（1）.align-items屬性規定的是專案在交叉軸方向行中的對齊方式。

（2）.align-content屬性規定的是專案所在行在交叉軸方向上的對齊方式。

上面這兩條闡述可能過於簡略了，很多朋友看了不太容易理解，下面再通過程式碼例項進行分析。

三.程式碼例項如下：

[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;
  align-content: center; 
}
#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;"></div>
  <div style="background-color:blue;"></div>
</div>
</body>
</html>

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

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

程式碼分析如下：

（1）.灰色容器元素採用彈性佈局，但是並沒有設定換行。

（2）.也就是說此彈性容器是一個單行容器，也就意味著唯一的行高等同於容器在交叉軸上的尺寸。

（3）.align-content屬性是用來設定行在容器交叉軸上的對齊方式，既然行高等同於容器交叉軸上的尺寸。

（4）.那麼也就無所謂居中操作了，專案也就只能在行的頂端排列了。

這也印證了網路上眾多文章的一個結論，那就是align-content屬性對單行容器無效。

[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-content: center; 
}
#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;"></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/171148n8ke8tl80k667o6o.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.外部灰色元素採用彈性佈局，並將flex-flow屬性值設定為row wrap。

（2）.這意味著灰色彈性容器是一個多行容器，每一個行高等同於當前行中專案在交叉軸上的尺寸。

（3）.align-content屬性用來設定行在交叉軸上的對齊方式，於是此屬性值設定為center。

（4）.也就意味著將兩個行在交叉軸上居中對齊，所以視覺上實現了專案居中對齊。

[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: center; 
}
#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;"></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/171232k1s8lsklkdwsg1fk.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.首先強調一點，網路上不少文章說align-items針對單行容器，這是錯誤的，此屬性是全能的。

（2）.此程式碼與上一個例子的程式碼唯一區別是將align-content屬性修改為align-items，渲染效果有很大差別。

（3）.雖然沒有設定align-content屬性，但是它的預設值是stretch，那麼行在交叉軸方向上的尺寸會擴充套件以適應容器尺寸。

（4）.所以兩個行平分容器元素在交叉軸上的空間。

（5）.又因為align-items規定的是專案在行中的對齊方式，所以align-items: center是設定專案在兩個行中居中。

上面的幾個例子足夠演示兩個屬性的實質區別在哪，下面再進行最後的總結：

（1）.align-items屬性是設定專案在所在行交叉軸方位的對齊方式。

（2）.align-content屬性是設定行在容器交叉軸方位的對齊方式。

掌握了兩個屬性的實質，那麼對於兩個屬性的區別自然就清晰起來，對於兩個屬性的應用也會得心應手。

相關文章