html - css flex布局
本文介绍了html - css flex布局的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
我想用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 挤下去
.item:nth-child(4){
margin: 0 32.5px;
}或者每行或每列一个容器
这篇关于html - css flex布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
