我有一个用 flex 显示的列表:
<ul>
<li></li>
....
ul{
list-style-type: none;
display: flex;
flex-wrap: wrap;
background: gold;
}
li{
flex-basis: 25%;
background:grey;
}
现在我想要在我的 li 元素之间留出一些空间,添加边距或填充会将元素推到下一行(当我有超过 4 个元素时我想要 flex wrap)。
我知道上面的问题可以通过框大小来解决,但我的主要问题是我想要元素之间的间距,但第一个和最后一个元素要与父元素的左侧和右侧对齐。
如何实现?
例如。
|li|spacing|li|spacing|li|spacing|li|
最佳答案
检查一下 - 我使用 calc
调整 flex-basis
以允许您可以为 分配的自定义
(使用 margin
>uljustify-content: space-between
来分配边距)。
ul {
list-style-type: none;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background: gold;
margin: 10px;
padding: 0;
height: 100px;
}
li {
flex-basis: calc(25% - 20px);
background: grey;
}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
让我知道您对此的反馈。谢谢!
关于html - flex 元素之间的间距?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39386119/