如何让这些面板以可滚动的表格格式显示？

Question

所以我正在尝试重现这种样式：

上面的这种表格是通过 Redux 动态拉入的：

class LocationList extends React.Component {
  componentDidMount() {
    this.props.fetchLocations();
  }

  renderLocation() {
    return this.props.locations.map(location => {
      return (
        <div className="" key={location.id}>
          <div className="location">
            <h1>
              {location.name}
              {location.airport_code}
            </h1>
            <div className="location-secondary-info">
              <span>
                <MaterialIcon icon="airplanemode_active" />
                {location.description}
              </span>
            </div>
          </div>
        </div>
      );
    });
  }

  render() {
    return <div className="locations-container">{this.renderLocation()}</div>;
  }
}

但是，我无法让样式恰到好处。所以你在上面看到的是可以垂直滚动的。

我在我的 JSX 中遇到了麻烦，所以我决定使用 Codepen.io。

我似乎无法获得那种表格格式，所以它只是像一大行一样水平滚动。

.locations-container {
  display: flex;
  justify-content: center;
  padding: 0 24px;
  overflow-y: scroll;
}

.locations-container div {
  display: flex;
  flex: 0 1 1152px;
  flex-flow: wrap;
}

.location {
  border-left: 2px solid #49aaca;
  padding: 14px;
  margin: 12px 0;
  flex: 1 1;
  min-width: 275px;
  max-width: 355px;
}

.location h1 {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: #454545;
  text-transform: uppercase;
}

.location span {
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  color: #a3a3a3;
}

.location:hover {
  background-color: #49aaca;
}

.location:hover h1 {
  color: #fff;
}

.location:hover span {
  color: #fff;
}

<div class="locations-container">
  <div>
    <div class="location">
      <h1>FlexBox</h1>
      <div>
        <span>this is the span element</span>
      </div>
    </div>
  </div>
  <div>
    <div class="location">
      <h1>FlexBox</h1>
      <div>
        <span>this is the span element</span>
      </div>
    </div>
  </div>
  <div>
    <div class="location">
      <h1>FlexBox</h1>
      <div>
        <span>this is the span element</span>
      </div>
    </div>
  </div>
  <div>
    <div class="location">
      <h1>FlexBox</h1>
      <div>
        <span>this is the span element</span>
      </div>
    </div>
  </div>
  <div>
    <div class="location">
      <h1>FlexBox</h1>
      <div>
        <span>this is the span element</span>
      </div>
    </div>
  </div>
  <div>
    <div class="location">
      <h1>FlexBox</h1>
      <div>
        <span>this is the span element</span>
      </div>
    </div>
  </div>
  <div>
    <div class="location">
      <h1>FlexBox</h1>
      <div>
        <span>this is the span element</span>
      </div>
    </div>
  </div>
  <div>
    <div class="location">
      <h1>FlexBox</h1>
      <div>
        <span>this is the span element</span>
      </div>
    </div>
  </div>
  <div>
    <div class="location">
      <h1>FlexBox</h1>
      <div>
        <span>this is the span element</span>
      </div>
    </div>
  </div>
</div>

所以我用纯 HTML 和 CSS 复制了它。显然，我对 Flex 的了解还不够，无法弄清楚最后一个设计。

Answer 1

你需要在容器上声明flex-wrap: wrap(.locations-container)。因为它覆盖了默认值nowrap。如果设置overflow-y: scroll，则需要定义高度。示例：height:200px;

还要使它只能修复 3 个项目，您可以替换 flex: 1 0 1152px;，我不确定您为什么使用 1152px，但 % 应该是更可取的：flex: 1 0 30%;

在flex 简写中定义flex-grow: 1 后，flex-basis 不需要为 33%，由于边距和填充，这实际上会导致每行的项目更少。

由于flex-grow 将占用行上的可用空间，flex-basis 只需大到足以强制执行换行。在这种情况下，使用flex-basis: 30%，有足够的空间放置边距，但没有足够的空间放置不需要的项目。请注意，因为您有 min-width，所以如果缺少所需的空间，则每行不会有 3 个项目。

您可以使用media query 处理响应式问题。例如我使用width:952px;

.locations-container {
  display: flex;
  /*justify-content: center;
  padding: 0 24px;*/
  overflow-y: scroll; /*if you set overflow-y: scroll, you need to define the height.example:*/
  height:200px;
  width: 952px; /*demo purpose since you had min-width*/
  flex-wrap: wrap; /*flex-wrap: wrap on the container. Is necessary, because it overrides the default value, which is nowrap*/
}

@media (min-width: 952px){
  .locations-container{
    width: 100%;
  }
}

.locations-container div {
  display: flex;
  /*flex: 1 0 1152px;*//*I'm not sure why you use 1152px, but % should be preferable*/
  flex: 1 0 30%;
  /*flex-flow: wrap;*//*doesn't seem to do anything*/
}

.location {
  border-left: 2px solid #49aaca;
  padding: 14px;
  margin: 12px 0;
  flex: 1 1;
  min-width: 275px;
  max-width: 355px;
}

.location h1 {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: #454545;
  text-transform: uppercase;
}

.location span {
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  color: #a3a3a3;
}

.location:hover {
  background-color: #49aaca;
}

.location:hover h1 {
  color: #fff;
}

.location:hover span {
  color: #fff;
}

<div class="locations-container">
  <div>
    <div class="location">
      <h1>FlexBox</h1>
      <div>
        <span>this is the span element</span>
      </div>
    </div>
  </div>
  <div>
    <div class="location">
      <h1>FlexBox</h1>
      <div>
        <span>this is the span element</span>
      </div>
    </div>
  </div>
  <div>
    <div class="location">
      <h1>FlexBox</h1>
      <div>
        <span>this is the span element</span>
      </div>
    </div>
  </div>
  <div>
    <div class="location">
      <h1>FlexBox</h1>
      <div>
        <span>this is the span element</span>
      </div>
    </div>
  </div>
  <div>
    <div class="location">
      <h1>FlexBox</h1>
      <div>
        <span>this is the span element</span>
      </div>
    </div>
  </div>
  <div>
    <div class="location">
      <h1>FlexBox</h1>
      <div>
        <span>this is the span element</span>
      </div>
    </div>
  </div>
  <div>
    <div class="location">
      <h1>FlexBox</h1>
      <div>
        <span>this is the span element</span>
      </div>
    </div>
  </div>
  <div>
    <div class="location">
      <h1>FlexBox</h1>
      <div>
        <span>this is the span element</span>
      </div>
    </div>
  </div>
  <div>
    <div class="location">
      <h1>FlexBox</h1>
      <div>
        <span>this is the span element</span>
      </div>
    </div>
  </div>
</div>