Question

我想使用flexbox在每行显示5个项目。

.parent-wrapper {
  height: 100%;
  width: 181px;
  border: 1px solid black;
}

.parent {
  display: flex;
  font-size: 0;
  flex-wrap: wrap;
  margin: -10px 0 0 -10px;
}

.child {
  display: inline-block;
  background: blue;
  margin: 10px 0 0 10px;
  flex: 1 1 calc(100% * (1/5) - 10px - 1px);
  height: 100px;
}

<body>
  <div class="parent-wrapper">
    <div class="parent">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </div>
</body>

我想使用flex grow，以便调整大小不会影响显示的数据。如果该行少于5个项目，则上面的代码将拉伸数据。如果我不使用flex grow，那么它对于视图来说效果很好，但是在调整大小时，显示的数据之后会显示一些空白。

如果没有flex增长，我如何仅使用flex基础就可以消耗额外的空间

calc（100％*（1/5）-10px-1px）

Answer 1

如果我的理解正确，似乎您正在寻找justify-content属性。您要删除项目后面的空间，同时还要防止它们拉伸。通过设置justify-content: space-between，可以达到所需的效果。它将在项目之间之间创建一个均匀的空间，但不会在之后或之前。我还设置了flex-grow: 0 0，因为我假设您不希望您的项目增加或缩小。

如果justify-content不是您需要的布局，则这里是指向w3schools的链接，列出了space-between的所有可能值。例如，您还可以选择center消耗您的物品以消耗额外的空间。

.parent-wrapper {
  height: 100%;
  width: 181px;
  border: 1px solid black;
}

.parent {
  display: flex;
  font-size: 0;
  flex-wrap: wrap;
  margin: -10px 0 0 -10px;
  justify-content: space-between; /* Spaces items evenly between each other */
}

.child {
  display: inline-block;
  background: blue;
  margin: 10px 0 0 10px;
  flex: 0 0 calc(100% * (1/5) - 10px - 1px); /* Setting 0 (none) for flex-grow and 0 for flex shrink */
  height: 100px;
}

<div class="parent-wrapper">
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

Answer 2

我为您创建了示例，可以尝试

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  width: 600px;
  height: 300px;
  border: solid 1px;
  align-items: center; 
}

.item {
  width: 100px;
  height: 70px;
  margin-right: 5px;
  display: inline-block;
  border: solid 1px;  
}

  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div

Flexbox显示动态项目数，每行5个项目，使用flex基础消耗更多空间

2 个答案: