极客观点
项目管理
HarmonyOS
我想用flex布局实现这个效果
然后我的代码是
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
margin: 0;
padding: 0;
}
html {
background: black;
}
.box {
width: 90px;
height: 90px;
border-radius: 4px;
background: white;
display: flex;
padding: 10px;
flex-wrap: wrap;
justify-content: space-between;
align-content:space-between;
}
.item {
border-radius: 50%;
background: black;
width: 25px;
height: 25px;
}
.item:nth-child(5){
align-self: center;
}
</style>
</head>
<body>
<div class="box">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
</body>
</html>
为什么第5个span单独加这个align-self不可以在垂直方向上把它自己剧中？
align-self只是调整 flex item 在每行的垂直位置，比如这里就有两行，每个 span 等高，所以占满了每行的高度，怎么调都不会有效果。一种方式是让第 4 个把 5、6 挤下去
或者每行或每列一个容器