避免在可滚动的 Flex 容器中出现收缩并垂直间距排列 Flex 项目

Question

我有一个容器，里面有很多项目。

我想要在单行中交替显示它们（容器上可能会有水平滚动条），或者将它们包装在多行中。

我考虑使用Flexbox布局模块。这里有两个例子：

.single-line {
  border: solid 1px blue;
  width: 50%;
  overflow-x: scroll;
}
.wrap-line {
  border: solid 1px green;
  width: 50%;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.single-line ul {
  flex-wrap: nowrap;
}
.wrap-line ul {
  flex-wrap: wrap;
}
li {
  display: block;
  width: 40px;
  height: 40px;
  background: gray;
  text-align: center;
  border: solid 1px red;
  line-height: 40px;
}

<div class="single-line">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
  </ul>
</div>

<br>

<div class="wrap-line">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
  </ul>
</div>

jsFiddle:

最重要的代码如下：

ul {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.single-line ul {
  flex-wrap: nowrap;
}

.wrap-line ul {
  flex-wrap: wrap;
}

这很接近我想要的，但还存在一些问题：

1. 第一个例子会缩小内部块，导致容器无法滚动。如何解决？

2. 在第二个例子中，如何在行之间添加垂直间隔，但不在容器边缘添加？我考虑过在每个 LI 上使用 margin-bottom，但这不是正确的解决方案（而且我不能为容器设置固定高度）。

- Luca Detomi

---

你是否正在尝试制作类似网格的东西？如果是的话，你可以使用一个小技巧：用空的div填充网格，这些div的宽度与列的宽度相同（div的数量必须等于网格将拥有的最大列数-1）。请查看此fiddle（调整输出大小）。 - user7126329

这是一个有趣的解决方案，虽然我不需要，但肯定有人会觉得有用。 - Luca Detomi

请不要在同一个问题中问多个问题。 - Oriol

顺便提一下，关于第二个问题，请查看以下内容：Flexbox：如果有多行，如何添加边距/垂直间距？ - Oriol

Answer 1

我已经做了类似这样的东西：https://jsfiddle.net/yduhj30L/18/。 flex-shrink: 0 可以使 flex 元素溢出。

第二个元素只设置了一个元素的 margin-top，并为每个元素设置了 flex-end 的位置。

编辑：将项目对齐到 flex-start 使滚动的项目可访问。

- Ula

---

感谢 flex-shrink: 0 解决方案。请问，为什么 flex-end 允许将整个第二行与第一行分开排列？如果有超过两行的情况呢？ - Luca Detomi

使用flex-end元素将位于容器的底部行，并且边距保持第一行到顶部。 - Ula

好的，很棒，但只有在分成2行时才能正确运行。如果是3行或更多行...它的布局就不好了... :-( - Luca Detomi

@LucaDetomi 或许可以试试这个：https://jsfiddle.net/yduhj30L/19/ - Ula

几乎，非常接近。每行之间只有一点垂直边距，不包括容器边缘。 - Luca Detomi

Answer 2

你已经回答了第一个问题。

关于第二个问题，你只需要一点技巧。

在所有项目上设置顶部边距。

为了隐藏第一行的边距，为 ul 设置相同数量的负边距。 由于你有一个外部容器，ul 位于此容器之外，以便上边距的部分是不可见的。

悬停 ul 来缩小它并测试它。

.wrap-line {
  border: solid 1px green;
  width: 70%;
  transition: width 5s;
}

.wrap-line:hover {
  width: 30%;  
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.wrap-line ul {
  flex-wrap: wrap;
  margin-top: -10px; /* added */
}
li {
  display: block;
  width: 40px;
  height: 40px;
  background: gray;
  text-align: center;
  border: solid 1px red;
  line-height: 40px;
  margin-top: 10px; /* added */
}

<div class="wrap-line">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
  </ul>
</div>

- vals