css - flex 盒子不工作我希望它如何工作

Question

flex box 有一些问题，也许有不同的方法？

我在一行中有五个可拉伸(stretch)的框，但只有 4 个适合，所以最后一个在下面，但它会拉伸(stretch)以适合页面的宽度。我希望下面的元素与上面的元素宽度相同。

像这样:

flex 盒子:

我想要什么:

我需要网页响应，所以我想让每一行适合屏幕的宽度，除了当它换行并且它不适合该行时。所以它们的宽度都一样。

编辑:我当前的代码:

CSS:

.box-wrapper {
    display:flex;
    width:100%;
    flex-flow:wrap;
    align-items:flex-start;
    padding-top:10px;
}

.box {
    flex:300px 1 0;
    padding-left:10px;
    padding-bottom:10px;
} 

HTML:

<section class="box-wrapper first-row">
     <div class="box"><img src="images/box.png" width="100%" /></div>
     <div class="box"><img src="images/box.png" width="100%" /></div>
     <div class="box"><img src="images/box.png" width="100%" /></div>
     <div class="box"><img src="images/box.png" width="100%" /></div>
     <div class="box"><img src="images/box.png" width="100%" /></div>
 </section>

Answer 1

我怀疑如果没有实际 行，您所追求的效果是不可能的。

flex-start 不与 space-between 或 space-around (AFAIK) 相结合，所以最接近的是:

.box-wrapper {
  display: flex;
  flex-flow: wrap;
  padding: 10px;
  border: 1px solid black;
  justify-content: space-between;
}
.box {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 150px;
  height: 150px;
  max-width: 150px;
  background: #f00;
  margin: 10px;
}

<section class="box-wrapper first-row">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</section>

JSfiddle Demo