水平滚动 Flex 子项

Question

我一直在网上浏览，但似乎无法找到可行的解决方案。

这是一个代码笔示例：

http://codepen.io/anon/pen/Wxjjqp

.container {
  display: flex;
}

.horizontally-scrolled-items {
  display: flex;
  background: lightblue;
  overflow-x: scroll;
}
.item {
  width: 1000px;
  border: 1px solid blue;
}

html:

<div class="container">
  <div class="horizontally-scrolled-items">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
  </div>
  <div class="aside">
    <button>keep me on screen</button>
  </div>
</div>

这个想法是水平滚动的项目是 flex:1。如果项目大于容器的宽度，则它们会滚动，并留在视图中。

Answer 1

您可以通过 来实现这一点min-width。给你的.item班级 amin-width加上flex-grow: 1;. 然后将你的.horizontally-scrolled-itemsdiv 设置为width: 100%;.

CSS

.horizontally-scrolled-items {
  width: 100%;
}

.item {
  min-width: 400px;
  flex-grow: 1;
}

代码笔

Answer 2

带弹性盒

.horizontally-scrolled-items {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.item {
  flex: 0 0 auto;
}

不带伸缩盒

.horizontally-scrolled-items {
   overflow-x: scroll;
   overflow-y: hidden;
   white-space: nowrap;
}
.item {
   display: inline-block;
}