align-content堆栈（由flex-wrap产生的独立行）对齐
align-content是针对flex容器里面多轴（多行）的情况，align-items是针对一行的情况进行排列。
必须对父元素设置自由盒属性display：flex; 并且设置排列方式为横向排列flex-direction:row; 并且设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用
| 值 | 描述 |
|---|---|
| stretch | 默认值。项目被拉伸以适应容器。 |
| center | 项目位于容器的中心。 |
| flex-start | 项目位于容器的结尾。 |
| flex-end | 项目位于容器的结尾。 |
| space-between | 项目位于各行之间留有空白的容器内。 |
| space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 |
html案例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
section{
width: 60%;
height: 600px;
border: 2px solid pink;
margin: 100px auto;
display: flex;
flex-flow: row wrap; /*这句话必须有 否则下面的不起效果*/
/*align-content: stretch;*/
/*align-content: center;*/
/*align-content: flex-start;*/
/*align-content: flex-end;*/
/*align-content: space-between;*/
/*align-content: space-around;*/
}
div{
width: 250px;
height: 200px;
}
div:first-child{
background-color: pink;
}
div:nth-child(2){
background-color: purple;
}
div:nth-child(3){
background-color: skyblue;
}
div:nth-child(4){
background-color: hotpink;
}
div:nth-child(5){
background-color: deeppink;
}
div:nth-child(6){
background-color: yellow;
}
div:nth-child(7){
background-color: lightyellow;
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</section>
</body>
</html>
1.案例效果图
pic1.png
2.align-content: center;
pic2.png
3.align-content: flex-start;
pic3.png
4.align-content: space-between;
pic4.png
5.align-content: space-around;
pic5.png
如有错误或建议欢迎大家指出与评论哈，希望这篇博文能帮助到大家，也可以分享给需要的人。
如需转载，请注明出处。https://www.jianshu.com/p/b158cc1f3018
网友评论