目前想到的
用column-count:2;column-gap:5px;效果不是很好
用
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
有个问题是第二行如果只有一个div,它居中了
我想要的效果是
图中的 1 2 3 4间隔是一样的,并且第二行及后续行后如果只有一个元素,左对齐,和上一行的第一个元素左对齐
目前想到的
用column-count:2;column-gap:5px;效果不是很好
用
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
有个问题是第二行如果只有一个div,它居中了
我想要的效果是
图中的 1 2 3 4间隔是一样的,并且第二行及后续行后如果只有一个元素,左对齐,和上一行的第一个元素左对齐
flex布局的话。
justify-content: space-around;
为左对齐。 然后通过 nth-child 纠正间距。justify-content: space-around;
为两端对齐。父级做左右边距flex布局,子元素用padding做间隔,然后孙子元素为卡片
<style>
.box{
width: 300px;
display: flex;
flex-wrap: wrap;
border: 1px solid #000;
}
.item{
width: 50%;
height: 100px;
padding: 5px;
box-sizing: border-box;
}
.item:nth-child(odd){
padding-left: 10px;
}
.item:nth-child(even){
padding-right: 10px;
}
.card{
height: 100%;
border-radius: 10px;
background: red;
}
</style>
<div class="box">
<div class="item">
<div class="card">222</div>
</div>
<div class="item">
<div class="card">222</div>
</div>
<div class="item">
<div class="card">222</div>
</div>
<div class="item">
<div class="card">222</div>
</div>
<div class="item">
<div class="card">222</div>
</div>
</div>
5 回答1.5k 阅读
5 回答1.7k 阅读✓ 已解决
4 回答1.3k 阅读✓ 已解决
2 回答1.5k 阅读✓ 已解决
3 回答1.4k 阅读✓ 已解决
2 回答922 阅读✓ 已解决
4 回答1.1k 阅读✓ 已解决
方案一(推荐)
查看例子
给每个 item 设置相同的 margin-left 和 margin-top 就好了。
方案二
查看例子