1

似乎在将 flex 与 nowrap 一起使用时 - 滚动条只允许向右移动，但左侧的项目仍然隐藏。我创建了一个 doceopen 示例来显示问题。 http://codepen.io/anon/pen/QpgvoZ

在以下情况下，水平滚动条似乎只适用于右侧，但左侧的项目只是隐藏且无法访问。我在 Chrome 和 FF 中看到了这种行为（IE11 似乎工作正常：-O）

我在这里缺少什么？

谢谢！

@import "compass/css3";
.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  justify-content: space-around;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  min-width: 200px;
  height: 150px;
  margin-top: 10px;
  flex-shrink: 0;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}
<ul class="flex-container">
  <li class="flex-item">111111</li>
  <li class="flex-item">222222</li>
  <li class="flex-item">333333</li>
  <li class="flex-item">444444</li>
  <li class="flex-item">555555</li>
  <li class="flex-item">666666</li>
  <li class="flex-item">777777</li>
  <li class="flex-item">888888</li>
  <li class="flex-item">999999</li>
</ul>

4

1 回答 1

1

你能去掉吗

-webkit-flex-flow: row nowrap;
justify-content: space-around;

并添加它overflow-x:auto;似乎.flex-container 可以解决您的问题

于 2017-03-13T14:20:56.240 回答