Question

我有一个标题菜单，上面有方形图像，每个图像周围都有空白。

问题：：如果元素很多，则最后一张图片的右边缘消失，ul的右填充也消失。

期望的结果：我希望最后一张图像的右边有10px的空间。

注意：我不能使用任何:first-child或:first-child来给li赋予不同的边距。这是因为某些排序动画无法处理。

（第二个标头只是为了说明我需要ul成为Flexbox，因为只有两张图像，它们需要在它们周围散布剩余空间。）

header {
  width: 300px;
  overflow: scroll;
  border: 1px solid blue;
}

ul {
  border: 1px solid red;
  padding: 5px;
  margin: 0;
  display: flex;
}

li {
  flex: 1 0 0;
  margin: 5px;
  list-style-type: none;
  display: flex;
  justify-content: center;
}

div {
  width: 80px;
  height: 80px;
  background: lightcoral;
}

<header>    
    <ul>
      <li><div></div></li>
      <li><div></div></li>
      <li><div></div></li>
      <li><div></div></li>    
    </ul>
  </header>
  
  <header>
    <ul>
      <li><div></div></li>
      <li><div></div></li>
    </ul>
  </header>

Answer 1

因为您告诉div使用flex是固定的，所以很难解决所有这些问题。您的商品总计为320px，而容器的宽度仅为300px。因此它将溢出（如您所定义）。在这种情况下，ul实际上在侧面具有边距，但是您可以通过使容器小于其内容的最小宽度来覆盖该行为。

您还可以在标头中添加一些填充，并将溢出滚动条放在ul上。

header {
  width: 300px;
  overflow: hidden;
  padding: 5px;
  border: 1px solid blue;
}

ul {
  border: 1px solid red;
  padding: 5px;
  overflow: scroll;
  margin: 0;
  display: flex;
}

li {
  flex: 1 0 0;
  margin: 5px;
  list-style-type: none;
  display: flex;
  justify-content: center;
}

div {
  width: 80px;
  height: 80px;
  background: lightcoral;
}

<header>    
    <ul>
      <li><div></div></li>
      <li><div></div></li>
      <li><div></div></li>
      <li><div></div></li>    
    </ul>
  </header>

  <header>
    <ul>
      <li><div></div></li>
      <li><div></div></li>
    </ul>
  </header>

Flexbox中缺少边距/填充

1 个答案: