时间戳

首页 > 解决方案 > flex-grow 最大值或缩小元素之间空间的边距

html - flex-grow 最大值或缩小元素之间空间的边距

问题描述

我正在基于同一行上的两个列表构建导航。两个列表中的所有项目之间应该有间距，但25px最多。

flex-grow 的问题： 如果我使用 flex-grow，元素会变得比它们自己的宽度 + 25px 大，因为有足够的可用空间。

margin-right 的问题： 如果容器变小了，25px 的 margin-right 没有减少，那么项目会断线而不是缩小它们的边距。

可能的解决方案：在每个元素之间使用一个 div ，给它flex-grow:1和max-width:25px.

没有额外的html还有另一种方法吗？

这是一个显示问题的代码笔：

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul,
.container,
.container2 {
  display: flex;
  justify-content: space-between;
}

.container,
.container2 {
  border: 1px solid red;
  width: 500px;
  margin-bottom: 20px;
}

h2 {
  margin-bottom: 5px;
}

p {
  margin: 0 0 5px 0;
}

.container ul.first {
  flex-grow: 1;
  /* this works, but each element should only grow by 25px */
}

.container ul.first,
.container2 ul.first {
  margin-right: 30px;
}

.container2 ul.first li {
  margin-right: 25px;
  /* this works, but should be reduced if not enough space */
}
<h2>Example 1: flex-grow on li</h2>
<p>Problem: the items get too big, should be max 25px spacing</p>
<div class=container>
  <ul class=first>
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
    <li>fifth</li>
    <li>sixth</li>
  </ul>
  <ul class=second>
    <li>first</li>
    <li>second</li>
  </ul>
</div>

<h2>Example 2: margin-right on li</h2>
<p>Problem: the spacing is not reduced on smaller containers</p>
<div class=container2>
  <ul class=first>
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
    <li>fifth</li>
    <li>sixth</li>
  </ul>
  <ul class=second>
    <li>first</li>
    <li>second</li>
  </ul>
</div>

标签： htmlcssflexbox

解决方案

一种想法是考虑使用伪元素和display:contents

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul{
  display: inline-flex;
  max-width:100%;
}

.container {
  border: 1px solid red;
  margin-bottom: 20px;
  display:flex;
  flex-wrap:wrap;
  justify-content: space-between;
}

h2 {
  margin-bottom: 5px;
}

p {
  margin: 0 0 5px 0;
}


.container ul.first{
  margin-right: 30px;
  max-width:calc(100% - 30px);
}

ul li:not(:last-child) {
  display:contents;
}
ul li:not(:last-child)::after {
   content:"";
   width:25px;
}
<div class=container>
  <ul class=first>
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
    <li>fifth</li>
    <li>sixth</li>
  </ul>
  <ul class=second>
    <li>first</li>
    <li>second</li>
  </ul>
</div>

推荐阅读