Question

在桌面上，产品表的布局＆＃39;我创造了很好的作品。我使用媒体查询来为网站设置小于850px的屏幕宽度。

我试图使用带有inline-flex的包装器div将子div包装到单独的＆＃39;行上。

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

＆＃13;

<div class="apply">

＆＃13;

* {
  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
  }
}

＆＃13;

Answer 1

这似乎是问题的根源：

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

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

当您告知弹性项目为width: 20vw时，它将变为视口宽度的20％。因此该项目将扩展和缩小以保持20％的大小。如果视口窄至5px，则项目将缩小到20％，并且没有理由进行换行（除非项目中有足够的内容强制使用最小大小）。

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

flex项目不会换行到下一行

1 个答案: