Question

我有一个容器内有很多物品。

我想在一行上交替显示它们（最终在容器上有一个水平滚动条）或包裹在多行中。

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

jsFiddle：

最重要的代码如下：

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

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

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

它接近我想要的但有一些问题：

第一个示例缩小内部块，因此容器不可滚动。如何解决？
在第二个示例中，如何在行之间添加垂直分隔，而不是在容器边缘添加垂直分隔？我在每个margin-bottom上考虑LI，但这不是正确的解决方案（我无法为容器设置固定的高度）

Answer 1

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

关于第二个，你需要的只是一个小技巧。

在所有项目上设置上限。

要隐藏第一行的此边距，请为 ul 设置相同金额的负边距。由于你有一个外部容器，ul位于这个容器外面，上面的magin不可见所需的数量

将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>

Answer 2

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

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

修改：将项目与flex-start对齐可使滚动项目可访问。

防止可滚动的Flex容器中的收缩和垂直空间弯曲项目

2 个答案: