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

Question

我坚持伸展弯曲的问题。 我有flexbox div与项目。这些物品可以拉伸到全宽并具有最小宽度属性，因此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>