flex布局换行后间隙问题
2020-07-01 本文已影响0人
aichishaqima
问题描述
今天遇到flex布局换行后产生间隙的问题，本来预期得到以下结果
pre.PNG
具体实现如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex布局换行后间隙问题</title>
<style>
html,body{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.content {
width: 380px;
height: 200px;
border: 1px solid #D54040;
border-radius: 4px;
box-sizing: border-box;
padding: 4px 0;
display: flex;
flex-wrap: wrap;
}
.name {
width: 58px;
height: 22px;
border: 1px solid #0000ff;
background: rgba(0, 0, 255, 0.15);
margin-left: 10px;
margin-top: 10px;
line-height: 22px;
text-align: center;
}
</style>
</head>
<body>
<div class="content">
<span class="name">张三</span>
<span class="name">李四</span>
<span class="name">王五</span>
<span class="name">赵六</span>
<span class="name">孙七</span>
<span class="name">周八</span>
<span class="name">郑十一</span>
<span class="name">张三</span>
<span class="name">李四</span>
</div>
</body>
</html>
得到如下结果：
act.PNG
解决方法
其实解决方法很简单，只需要在父元素这里是class为content的元素上加入
align-content: flex-start;
分析
出现该问题主要是因为在css学习过程中对于弹性盒子布局，对于align-content属性的强调相较于其他属性比较弱。align-content属性的默认值为stretch，所以会有第二行伸展的情况产生，具体align-content用法可以去看官方文档，这里不赘述。
针对该实例对align-content属性进行简单实践
align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;
align-content: center;
center.PNG
align-content: flex-end;
flex-end.PNG
align-content: space-between;
space-between.PNG
align-content: space-around;
space-around.PNG
问题解决过程中主要参考了
https://blog.csdn.net/txfyteen/article/details/82663029
希望最短时间解决大家问题
最后编辑 20200701 aishishaqima
