Question

.d1 {
  background: lightblue;
  display: flex;
  padding: 5px;
}

img {
  flex: 1;
}

<div class="d1">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
</div>

我想在flexbox内连续显示例如5张大图像。我希望所有图像的宽度都适合当前屏幕，而不要包在底部。我尝试了flex: 1标记的width: 100%，img的不同组合，但是都无效...

Answer 1

摘自this answer，说明为什么图片在Flexbox布局中无法调整大小：

弹性项目的初始设置是最小宽度：自动。这意味着弹性项默认情况下不能缩小到其内容的大小以下。

这意味着除非给定宽度，否则图像不会缩小。要解决此问题，您可以将图像包装在div中（该图像会缩小以填充flex容器），然后将图像的宽度设置为100％

.d1 {
  background: lightblue;
  display: flex;
  padding: 5px;
}

img {
  display: block;
  width: 100%;
}

<div class="d1">
  <div><img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg"></div>
  <div><img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg"></div>
  <div><img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg"></div>
  <div><img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg"></div>
  <div><img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg"></div>
</div>

Answer 2

您需要调整容器的内容。然后，您可以为图像设置柔韧性基准。我在这里使用过space-between，但是任何other values都可以使用。

.d1 {
  display: flex;
  border: 5px solid black;
  justify-content: space-between;
}

img {
  flex: 0 0 20%;
  width: 20%;
}

<div class="d1">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
</div>

如果您不知道要使用的图像数量，那么我建议将图像包装在div中，这样可以正常弯曲。

Answer 3

根据问题区域中的描述，我们认为您需要一个具有全角的容器和一个包含五个全角图像的水平滚动条。

.scroll-wrap { border: 5px solid lightblue; width: 100%; overflow: auto;}
.d1 {display: flex; width: 500%;}
.d1 img{width: 20%;}

<div class="scroll-wrap">
  <div class="d1">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  </div>
</div>

使一排大图像适合flexbox

3 个答案: