align-conten和align-items之間的區別

時間 2019-11-08

標籤 align conten items 之間區別简体版

原文原文鏈接

align-contenthtml

做用:測試

會設置自由盒內部全部行做爲一個總體在垂直方向排列方式。針對多行做爲一個總體在縱軸上的排列方式，該屬性對單行無效。flex

條件:
必須對父元素設置自由盒屬性display:flex;，而且設置排列方式爲橫向排列flex-direction:row;而且設置換行，flex-wrap:wrap;這樣這個屬性的設置纔會起做用。
設置對象:spa

這個屬性是對她容器內部的項目起做用，對父元素進行設置。3d

該屬性對單行彈性盒子模型無效。該屬性定義了當有多根主軸時，即item不止一行時，多行（全部行做爲一個總體）在交叉軸（即非主軸）軸上的對齊方式。
 align-content可能值含義以下（假設主軸爲水平方向）：
　　　　　　flex-start：左對齊
　　　　　　flex-end：右對齊
　　　　　　center：居中對齊
　　　　　　space- between：兩端對齊
　　　　　　space-around：沿軸線均勻分佈
　　　　　　stretch： 默認值。各行將根據其flex-grow值伸展以充分佔據剩餘空間。會拉伸容器內每行佔用的空間，填充方式爲給每行下方增長空白
　　　　　　該屬性對單行彈性盒子模型無效。拉伸全部行來填滿剩餘空間。剩餘空間平均的再分配給每一行。

取值:
stretch:默認設置，會拉伸容器內每一行的佔用的空間，填充方式爲給每一行的下方增長空白。第一行默認從容器頂端開始排列。code

<!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:這個會取消行與行之間的空白並把全部行做爲一個總體在縱軸的方向上垂直居中。htm

<!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:這個會取消行之間的空白並把全部行做爲一個總體在縱軸方向上，放在容器底部。blog

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
  }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。