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

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-grow: 1中定义了flex的情况下，flex-basis不需要为33％，这实际上会由于边距和填充而导致每行较少的项目。< / p>

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