当容器内的元素只有一行时，使用align-items会使这行元素居中。但是使用align-content没有效果
来上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#div1 {
margin: 30px auto;
width: 100px;
height: 60px;
background-color: #909;
display: flex;
display: -webkit-flex;
text-align: center;
}
.child {
width: 30px;
height: 20px;
line-height: 20px;
}
.child1 {
background-color: #f55;
}
.child2 {
background-color: gray;
}
</style>
</head>
<body>
<div id="div1">
<div class="child child1">1</div>
<div class="child child2">2</div>
</div>
</body>
</html>在chrome下面是这样子的
对比一：
如果在#div1样式里面添加align-items:center;
那么效果如下图：
如果在#div1样式里面添加align-content:center;
那么效果如下图：
结论：在单行显示中align-content是没用的
对比二：
把两个伸缩项目的width做一下改变
.child {
width:80px;
}
效果如下图：
如果在#div1样式里面添加align-items:center;
那么效果如下图：
如果在#div1样式里面添加align-content:center;
那么效果如下图：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
