align-conten和align-items之間的區別
align-content
作用:
會設置自由盒內部所有行作為一個整體在垂直方向排列方式。針對多行作為一個整體在縱軸上的排列方式，該屬性對單行無效。
條件:
必須對父元素設置自由盒屬性display:flex;，並且設置排列方式為橫向排列flex-direction:row;並且設置換行，flex-wrap:wrap;這樣這個屬性的設置才會起作用。
設置對象:
這個屬性是對她容器內部的項目起作用，對父元素進行設置。
該屬性對單行彈性盒子模型無效。該屬性定義了當有多根主軸時，即item不止一行時，多行（所有行作為一個整體）在交叉軸（即非主軸）軸上的對齊方式。
align-content可能值含義如下（假設主軸為水平方向）： flex-start：左對齊 flex-end：右對齊 center：居中對齊 space- between：兩端對齊 space-around：沿軸線均勻分布 stretch： 默認值。各行將根據其flex-grow值伸展以充分占據剩余空間。會拉伸容器內每行占用的空間，填充方式為給每行下方增加空白
該屬性對單行彈性盒子模型無效。拉伸所有行來填滿剩余空間。剩余空間平均的再分配給每一行。
取值:
stretch:默認設置，會拉伸容器內每一行的占用的空間，填充方式為給每一行的下方增加空白。第一行默認從容器頂端開始排列。
<!DOCTYPE=html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>
Align-content
</title>
<style>
#father{
width:200px;
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-content:strech;
height:200px;
background-color:grey;
}
.son1{
height:30px;
width:100px;
background-color:orange;
}
.son2{
height:30px;
width:100px;
background-color:red;
}
.son3{
height:30px;
width:100px;
background-color:#08a9b5;
}
</style>
</head>
<body>
<div id="father">
<div class="son1">
q
</div>
<div class="son2">
w
</div>
<div class="son3">
e
</div>
<div class="son3">
e
</div>
<div class="son3">
e
</div>
</div>
</body>
</html>
Center:這個會取消行與行之間的空白並把所有行作為一個整體在縱軸的方向上垂直居中。
<!DOCTYPE=html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>
關於文檔元素測試
</title>
<style>
#father{
width:200px;
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-content:center;
height:200px;
background-color:grey;
}
.son1{
height:30px;
width:100px;
background-color:orange;
}
.son2{
height:30px;
width:100px;
background-color:red;
}
.son3{
height:30px;
width:100px;
background-color:#08a9b5;
}
.son4{
height:30px;
width:100px;
background-color:#9ad1c3;
}
.son5{
height:30px;
width:100px;
background-color:rgb(21,123,126);
}
</style>
</head>
<body>
<div id="father">
<div class="son1">
q
</div>
<div class="son2">
w
</div>
<div class="son3">
e
</div>
<div class="son4">
e
</div>
<div class="son5">
e
</div>
</div>
</body>
</html>
Flex-start:這個會取行之間的空白，並把所有行作為一個整體放在容器頂部。
<!DOCTYPE=html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>
關於文檔元素測試
</title>
<style>
#father{
width:200px;
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-content:flex-start;
height:200px;
background-color:grey;
}
.son1{
height:30px;
width:100px;
background-color:orange;
}
.son2{
height:30px;
width:100px;
background-color:red;
}
.son3{
height:30px;
width:100px;
background-color:#08a9b5;
}
.son4{
height:30px;
width:100px;
background-color:#9ad1c3;
}
.son5{
height:30px;
width:100px;
background-color:rgb(21,123,126);
}
</style>
</head>
<body>
<div id="father">
<div class="son1">
q
</div>
<div class="son2">
w
</div>
<div class="son3">
e
</div>
<div class="son4">
e
</div>
<div class="son5">
e
</div>
</div>
</body>
</html>
flex-end:這個會取消行之間的空白並把所有行作為一個整體在縱軸方向上，放在容器底部。
align-content:flex-end;
space-between這個會使行在垂直方向兩端對齊。即上面的行對齊容器頂部，最下面行對齊容器底部。留相同間隔在每個行之間。
align-content:space-between;
Space-around:這個會使每一行的上下位置保留相同長度空白，使得行之間的空白為兩倍的單行空白。
align-content:space-around;
Inherit:使得元素的這個屬性繼承自它的父元素。
innitial:使元素這個屬性為默認初始值。
指定了當前Flex容器的每一行中的items項目在此行上在交叉軸上的對齊方式
指定了每一行內items相對彼此自身的在交叉軸上的對齊方式。可能的值有flex-start|flex-end|center|baseline|stretch，當主軸水平時，其具體含義為
flex-start：當items設置了高度時的默認值。頂端對齊 。（針對設置了高度的items）
flex-end：底部對齊。（針對items設置了高度）
center：豎直方向上居中對齊 （同上）
baseline：item第一行文字的底部對齊 （同上）
stretch：默認值。（針對沒有設置高度的items）當item都未設置高度，而且是單行時，item將和容器等高對齊。當item都設置了高度時，設置strentch與flex-start的效果
一樣。當items有的設置了高度
有的沒有設置高度，並且是單行。如下圖：
因為單行設置align-content無效，所以如果items有設置高度，並且align-items設置為align-items：center的效果如下圖
因為單行設置align-content無效，所以如果items有設置高度，並且align-items設置為align-items：flex-start的效果如下圖.
在items設置了高度時，flex-start和stech的樣式一樣。
因為單行設置align-content無效，所以如果items有設置高度，並且align-items設置為align-items：flex-end的效果如下圖
總結兩者的區別：
首先：
#container { display: flex; height: 200px; width: 240px; flex-wrap: wrap; align-content: center; align-items: center; background-color: #8c8c8c; justify-content: center; }
效果圖如下：
#container { display: flex; height: 200px; width: 240px; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; background-color: #8c8c8c; justify-content: flex-start; }
以上可知，在沒有設置align-content為strech時，既沒有把父容器的多余的空間分配每行時，在每個item之間和行與行之間存在默認的距離值。
設置父容器
#container {
display: flex;
height:200px;
width: 240px;
flex-wrap: wrap;
align-content:center;
align-items: center;
background-color: #8c8c8c;
justify-content: center
}
效果如下
設置父容器：
#container {
display: flex;
height:200px;
width: 240px;
flex-wrap: wrap;
align-content: flex-start;
align-items: center;
background-color: #8c8c8c;
justify-content: center
}
效果如下：
設置父容器
#container {
display: flex;
height:200px;
width: 240px;
flex-wrap: wrap;
align-content:center;
align-items: flex-start;
background-color: #8c8c8c;
justify-content: flex-end
}
align-conten和align-items之間的區別