flex佈局換行空白間隙之align-content
阿新 • • 發佈：2018-12-09
父元素程式碼如下：
.nav-right{
width: 75%;
padding: 10px;
display: flex;
/* 預設是水平的 */
flex-direction: row;/*設定子元素的排列方向*/
flex-wrap: wrap;/*溢位則換行*/
}
子元素程式碼如下：
.nav-right-item{
width: 33.33%;
height: 120px;
text-align: center;
}但是結果並不如人願，行與行之間存在空白間隙
解決辦法只需要在父元素加上align-content:flex-start
.nav-right{
width: 75%;
padding: 10px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start/*子元素之間取消空白間隙，並把專案放在容器頂部。*/
}
align-content
作用:
會設定自由盒內部各個專案在垂直方向排列方式。
條件: 必須對父元素設定自由盒屬性display:flex;，並且設定排列方式為橫向排列flex-direction:row;並且設定換行，flex-wrap:wrap;這樣這個屬性的設定才會起作用。 設定物件:
這個屬性是對她容器內部的專案起作用，對父元素進行設定。取值: 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:使元素這個屬性為預設初始值。