html - 防止在可滚动的 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. 第一个示例缩小内部 block ，因此容器不可滚动。怎么解决？

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

Answer 1

我做了这样的事情:https://jsfiddle.net/yduhj30L/18/ flex-shrink: 0 使 flex 元素可以溢出。

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

编辑:将元素对齐到 flex-start 使滚动元素可访问。