flex布局換行空白間隙之a(chǎn)lign-content的使用

發(fā)布時(shí)間：2020-07-21 15:58:16 作者：txfyteen

這篇文章主要介紹了flex布局換行空白間隙之a(chǎn)lign-content的使用,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、本文實(shí)現(xiàn)的效果圖如下：布局右側(cè)使用flex布局，超過3個(gè)則換行。

父元素代碼如下：

.nav-right{
  width: 75%;
  padding: 10px;
  display: flex;
  /* 默認(rèn)是水平的 */
  flex-direction: row;/*設(shè)置子元素的排列方向*/
  flex-wrap: wrap;/*溢出則換行*/
}

子元素代碼如下：

.nav-right-item{
  width: 33.33%;  
  height: 120px;  
  text-align: center;
}

但是結(jié)果并不如人愿，行與行之間存在空白間隙

解決辦法只需要在父元素加上align-content:flex-start

.nav-right{
  width: 75%;
  padding: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start/*子元素之間取消空白間隙，并把項(xiàng)目放在容器頂部。*/
}

align-content

作用:

會設(shè)置自由盒內(nèi)部各個(gè)項(xiàng)目在垂直方向排列方式。

條件:
必須對父元素設(shè)置自由盒屬性display:flex;，并且設(shè)置排列方式為橫向排列flex-direction:row;并且設(shè)置換行，flex-wrap:wrap;這樣這個(gè)屬性的設(shè)置才會起作用。
設(shè)置對象:

這個(gè)屬性是對她容器內(nèi)部的項(xiàng)目起作用，對父元素進(jìn)行設(shè)置。
取值:
stretch:默認(rèn)設(shè)置，會拉伸容器內(nèi)每個(gè)項(xiàng)目占用的空間，填充方式為給每個(gè)項(xiàng)目下方增加空白。第一個(gè)項(xiàng)目默認(rèn)從容器頂端開始排列。

<!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:這個(gè)會取消項(xiàng)目之間的空白并把所有項(xiàng)目垂直居中。

<!DOCTYPE=html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>
關(guān)于文檔元素測試
</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:這個(gè)會取消項(xiàng)目之間的空白，并把項(xiàng)目放在容器頂部。

<!DOCTYPE=html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>
關(guān)于文檔元素測試
</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>