一、文中完成的实际效果图以下：合理布局右边应用flex合理布局，超出3个则换行。
父原素编码以下：
.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:使原素这一特性为默认设置原始值。
注：文章内容一部分编码来源于有关css中的align-content特性详细说明
到此这篇有关flex合理布局换行空白页空隙之align-content的应用的文章内容就详细介绍到这了,大量有关flex换行空白页空隙內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！
Copyright © 2002-2020 html网页制作_php网页制作_网页设计稿_网页编辑工具_学生网页设计模板 版权所有 （网站地图） 粤ICP备10235580号