CSS 使 flex 包裹的元素不超过其兄弟元素的宽度

Question

我遇到了拉伸弯曲的问题。 我有带有项目的 flexbox div。这些项目可以拉伸到全宽并具有 min-width 属性，因此大屏幕可以容纳 3-4 个元素，小屏幕可以容纳 1-2 个元素。 我想让它们的宽度相等，但问题是如果它们的数量少于顶部元素，则包装的物品会更宽。

附在我当前的结果和预期行为的下方。我怎样才能做到？

.items {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.item {
  min-width: 400px;
  border: 1px solid black;
  margin: 0;
  height: 200px;
  flex-grow: 1;
}

<div class="items">
  <div class="item">1</div>
  <div class="item">1</div>
  <div class="item">1</div>
  <div class="item">1</div>
  <div class="item">1</div>
</div>

谢谢！

---

更新 02.05.2016

感谢@vals，我想出了适用于不同屏幕尺寸的百分比宽度解决方案。 （但似乎我在使用 33% 宽度的元素时遇到了一些小问题，其中 1% 的空白空间在它们周围留下了 xD）

.items {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
}

@media only screen and (max-width: 820px)  {
  .item {
    width: 100%;
  }
}

@media only screen and (min-width: 821px) and (max-width: 1220px)  {
  .item {
    width: 50%;
  }
}

@media only screen and (min-width: 1221px) and (max-width: 1620px)  {
  .item {
    width: 33%;
  }
}

@media only screen and (min-width: 1621px) and (max-width: 2020px)  {
  .item {
    width: 25%;
  }
}

.item {
  box-sizing: border-box;
  border: 1px solid black;
  margin: 0;
  height: 200px;
}

<div class="items">
  <div class="item">1</div>
  <div class="item">1</div>
  <div class="item">1</div>
  <div class="item">1</div>
  <div class="item">1</div>
</div>

Answer 1

这是一个复杂的案例，您需要根据您的特定布局和元素数量调整媒体查询。

我对不同的媒体查询结果进行了颜色编码以帮助识别它们

此外，items 元素内还有三个额外的 div 来帮助调整尺寸

.items {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.item {
  min-width: 400px;
  border: 1px solid black;
  margin: 0;
  height: 100px;
  flex-grow: 2;
}

.filler1, .filler2, .filler3 {
  height: 0px;
  background-color: lightgreen;
}

@media only screen and (max-width: 820px)  {
  /* one item per line */
  .filler2, .filler3 {display: none;}
  .item {background-color: yellow;}
}

@media only screen and (min-width: 821px) and (max-width: 1220px)  {

    /* 2 items per line */

    .item:nth-last-child(4) {
        order: 9;
        background-color: red;
    }
    .filler1 {
      margin-right: 100%;
    }
    .filler2 {
      min-width: 200px;
      flex-grow: 1;
      order: 4;
    }
    .filler3 {
      min-width: 200px;
      flex-grow: 1;
      order: 14;
    }
}

@media only screen and (min-width: 1221px) and (max-width: 1620px)  {

    .item:nth-last-child(4), .item:nth-last-child(5) {
        order: 9;
        background-color: green;
    }
    .filler1 {
      margin-right: 100%;
    }
    .filler2 {
      min-width: 200px;
      flex-grow: 1;
      order: 4;
    }
    .filler3 {
      min-width: 200px;
      flex-grow: 1;
      order: 14;
    }
}

@media only screen and (min-width: 1621px) and (max-width: 2020px)  {

    .item:nth-last-child(4) {
        order: 9;
        background-color: lightblue;
    }
    .filler1 {
      margin-right: 100%;
    }
    .filler2 {
      min-width: 400px;
      flex-grow: 2;
      order: 4;
    }
    .filler3 {
      min-width: 400px;
      flex-grow: 2;
      order: 14;
    }
}

<div class="items">
  <div class="item">1</div>
  <div class="item">1</div>
  <div class="item">1</div>
  <div class="item">1</div>
  <div class="item">1</div>
    <div class="filler1"></div>
  <div class="filler2"></div>
  <div class="filler3"></div>
</div>