CSS align-content

admin發表於2019-04-16
CSS

關於彈性佈局的總體概括性介紹可以參閱display:flex 彈性佈局一章節。

此屬性用於設定交叉軸方向專案的對齊方式，本文將通過程式碼例項對其進行詳細介紹。

一.知識準備：

（1）.彈性容器中的軸線：

將元素的display屬性值設定為flex或者inline-flex即可形成一個flex容器，也稱之為容器元素。

關於flex與inline-flex的區別可以參閱display:flex與inline-flex 區別一章節。

容器元素具有兩個軸線，預設狀態下，水平的主軸和與主軸垂直的交叉軸。

主軸與交叉軸的方位是可以改變的，具體參閱CSS flex-direction一章節。

簡單圖示如下：

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

（2）.多行容器與單行容器：

彈性容器分為單行容器與多行容器，flex-wrap屬性值為wrap或者wrap-reverse的容器是多行容器（即便容器中專案只有一行），否則容器就是單行容器。多行容器中，每一行交叉軸方向上的尺寸就是其中專案的最大尺寸，單行容器中，行交叉軸方向的尺寸就是容器交叉軸方向上的尺寸。

二.屬性基本用法：

此屬性用於設定容器中的專案在交叉軸上的對齊方式，與align-items功能非常類似。

更為準確的說，此屬性是設定容器中交叉軸方向上行的對齊方式，後面會通過程式碼例項進一步說明。

特別說明：如果是單行容器，則此屬性不起作用，具體原因會在程式碼例項中闡明。

關於align-content與align-items的區別可以參閱align-items與align-content區別一章節。

語法結構：

[CSS] 純文字檢視 複製程式碼
align-content: stretch|center|flex-start|flex-end|space-between|space-around

屬性值解析：

（1）.stretch：預設值，規定行被拉伸以適應交叉軸容器的尺寸，其中的專案隨之被拉伸。

（2）.center：規定容器中的行在容器交叉軸上居中對齊。

（3）.flex-start：規定容器中的行在容器交叉軸上起始位置對齊。

（4）.flex-end：規定容器中的行在容器交叉軸上結束位置對齊。

（5）.space-between：規定容器中的行在容器交叉軸上兩端對齊，行之間的間隔都相等。

（6）.space-around:每規定容器中的行兩側的間隔相等。所以行之間的間隔比行與容器邊緣的間隔大一倍。

三.程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style> 
#main {
  width: 70px;
  height: 300px;
  background:#ccc;
  display: flex;
  flex-flow: row wrap;
  align-content: stretch; 
}
#main div {
  width: 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/131804hpitos8ctpxzcrra.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼分析如下：

（1）.通過flex-flow: row wrap將外層div設定為多行容器。

（2）.設定align-content屬性值為stretch。

（3）.那麼行就會在交叉軸方向擴充套件以適應容器交叉軸方向的尺寸，專案尺寸也隨之擴充套件。

（4）.如果設定了專案交叉軸方向的尺寸，比如height，那麼專案尺寸不會擴充套件，只是行的尺寸的擴充套件。

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

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

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

程式碼分析如下：

（1）.單行容器，且設定align-content屬性值為center。

（2）.可以看到容器中的專案並沒有在容器交叉軸上居中顯示。

（3）.因為，實質上是設定的行在容器交叉軸上的對齊方式，並且單行容器中的行高預設是容器交叉軸的高度。

（4）.所以，在視覺上也就達不到專案在容器中居中的效果了。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style> 
#main {
  width: 70px;
  height: 300px;
  background:#ccc;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start; 
}
#main div {
  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/131857hjj4gmejt2gkk1ae.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.多行容器，且設定align-content屬性值為flex-start。

（2）.也就是設定行在在交叉軸方位上起始位置對齊，本例中就是頂端對齊。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style> 
#main {
  width: 70px;
  height: 300px;
  background:#ccc;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between; 
}
#main div {
  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/131934mb6h86uym6u8hrht.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.多行容器，且設定align-content屬性值為space-between。

（2）.也就是設定行在容器交叉軸上兩端對齊，行之間的間隔都相等。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style> 
#main {
  width: 70px;
  height: 300px;
  background:#ccc;
  display: flex;
  flex-flow: row wrap;
  align-content: space-around; 
}
#main div {
  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/131957x85xxggxswm52g28.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.多行容器，且設定align-content屬性值為space-around。

（2）.設定行兩側的間隔相等，所以，行之間的間隔比行與容器邊緣的間隔大一倍。

（3）.也就是說每一個專案交叉軸方向兩側都有一定的間隔，於是如果兩個專案相鄰，它們之間的間隔就是兩個對應間隔的值，所以黃色與綠色之間的間隔是黃色與容器頂部邊緣之間間隔的兩倍。

相關文章