html – flex元素之间的间距？

概述JSFiddle 我有一个显示flex的列表： <ul> <li></li> ....ul{ list-style-type: none; display: flex; flex-wrap: wrap; background: gold;}li{ flex-basis: 25%; background:grey; } 现在我想在我的li元 JSFiddle

我有一个显示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包装).

我知道上面的内容可以通过框大小来解决,但我的主要问题是我想要元素之间的间距,但是第一个和最后一个元素排列在父元素的左侧和右侧.

怎么能实现这一目标？

例如.

|li|spacing|li|spacing|li|spacing|li|

解决方法 检查一下 – 我使用calc来调整flex-basis以允许你可以为ul分配的自定义边距(使用的justify-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元素之间的间距？全部内容，希望文章能够帮你解决html – flex元素之间的间距？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。