弹性项目不会换行到下一行答案

【问题标题】：flex items won't wrap to next row弹性项目不会换行到下一行
【发布时间】：2018-03-03 02:28:39
【问题描述】：

在桌面上，我创建的“产品表”的布局可以正常工作。我使用媒体查询来设置小于 850 像素屏幕宽度的网站样式。

我尝试使用带有 inline-flex 的包装 div 将子 div 包装到单独的“行”上。

我想要发生的事情是让<img class="brand"> 在一行，三个<div class="minmaxtitle"> div（和子div）在下一行，然后<div class="apply"> 在第三行（所有中心对齐）。在附加的 CSS 中唯一不起作用的是图像和三个产品详细信息 div 保持在同一行？

* {
  margin: 0;
  padding: 0
}

.apply {
  background-color: mediumseagreen;
  display: inline-block;
  width: 12vw;
  padding-top: 1vw;
  padding-bottom: 1vw;
  line-height: 2.5vw;
  text-decoration: none;
  text-align: center;
  color: white;
  border-radius: .25vw;
  box-shadow: 0 1px 2px 0 #cfcfcf
}

.brand {
  width: 10vw;
  vertical-align: top
}

.minmaxtitle {
  display: inline-block;
  padding-bottom: 1vw;
  background: mediumseagreen;
  width: 15vw;
  padding-top: .5vw;
  padding-bottom: .5vw;
  color: white
}

.minmax {
  display: inline-block
}

.min {
  width: 7.5vw;
  position: relative;
  float: left;
  background: #ebf7f0;
  padding-top: .5vw;
  padding-bottom: .5vw
}

.max {
  width: 7.5vw;
  position: relative;
  float: left;
  background: #f7ebf2;
  padding-top: .5vw;
  padding-bottom: .5vw
}

.productbox {
  padding: .2vw;
  justify-content: middle;
  align-items: middle;
  width: 15vw;
  margin: auto
}

.productwrap {
  display: inline-flex;
  width: 100%;
  flex-wrap: wrap;
  text-align: center
}

@media all and (min-width:0) and (max-width:850px) {
  .brand {
    width: 20vw;
    display: inline-block
  }
  .minmaxtitle {
    background: mediumseagreen;
    width: 20vw;
    padding-top: 1vw;
    color: white;
    height: 10vw;
    vertical-align: middle
  }
  .min {
    width: 20vw;
    background: #ebf7f0;
    padding-top: .5vw;
    padding-bottom: .5vw
  }
  .max {
    width: 20vw;
    background: #f7ebf2;
    padding-top: .5vw;
    padding-bottom: .5vw
  }
  .productbox {
    justify-content: middle;
    align-items: middle;
    width: 20vw
  }
  .productwrap {
    display: inline-flex;
    width: 100%;
    flex-wrap: wrap;
    text-align: center
  }
  .apply {
    margin-top: 2vw;
    margin-bottom: 2vw;
    height: 12vw;
    line-height: 12vw;
    width: 45vw;
    align-items: left
  }
}

<div class="productwrap">
  <div class="productbox">
    <img class="brand" alt="brand" src="http://via.placeholder.com/190x120.png">
  </div>
  <div class="productbox">
    <div class="minmaxtitle">
      <p>Detail</p>
    </div>
    <div class="minmax">
      <div class="min">From
        <br>1</div>
      <div class="max">To
        <br>2</div>
    </div>
  </div>
  <div class="productbox">
    <div class="minmaxtitle">
      <p>Detail</p>
    </div>
    <div class="minmax">
      <div class="min">From
        <br>1</div>
      <div class="max">To
        <br>2</div>
    </div>
  </div>
  <div class="productbox">
    <div class="minmaxtitle">
      <p>Detail</p>
    </div>
    <div class="minmax">
      <div class="min">From
        <br>1</div>
      <div class="max">To
        <br>2</div>
    </div>
  </div>
  <div class="productbox">
    <a class="apply" target="_blank" href="https://www.example.com">Link</a>
  </div>
</div>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

这似乎是问题的根源：

.productbox {
    justify-content: middle;
    align-items: middle;
    width: 20vw
}

首先，middle 不是 flex 对齐属性的有效值。请改用center。但这不是导致问题的原因。

当你告诉一个弹性项目是width: 20vw，它变成了视口宽度的20%。因此，该项目将扩大和缩小以保持 20% 的大小。如果视口窄到 5px，则项目将缩小到 20%，并且没有理由换行（除非项目中有足够的内容来强制最小尺寸）。

考虑使用不同的长度单位，例如px 或em (but not %)。

【讨论】：