html – flex元素之间的间距？

发布时间：2020-12-14 22:32:13 所属栏目：资源来源：网络整理

导读：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>

请告诉我您对此的反馈.谢谢！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!