SVG图像在flex box中的表现

Question

SVG图像在flex box中的表现

4

我目前正在学习CSS flexbox，并且有几个关于在flexbox中使用SVG图像的问题。如果一个SVG图像位于HTML文档的主体内，那么SVG图像的宽度与主体的宽度相同。当我将display:flex应用于标签时，SVG图像在垂直居中并且大小被缩小了，它与会将整个高度扩展到与主体的高度相匹配的JPEG图像不同。这是让我感到困惑的第一个要点。

第二个要点是，当我将SVG放在一个div里面时，SVG就会消失。我读了一篇关于这个问题的stackoverflow帖子，它指出这是因为SVG没有设置内部宽度/高度。但是为什么在没有div的情况下SVG图像不会消失呢？这是相同的图像，也就是说内部宽度/高度也没有设置。如果我再放一个SVG到div里面，那么SVG图像会神奇地出现并带有微小的宽度和高度。这些SVG图像垂直对齐而不是水平对齐。为什么当多于一个SVG放置在div中时，它们会重新出现？

抱歉我的英语不好，因为英语不是我的母语。

- user13641224

1

首先，尝试向您的<img>标签添加width/height属性。您的问题与SVG无关。关于flex。flex中的每个元素都表现为列或行。如果您想要占用100％的宽度，请添加width: 100％或flex-basis: 100％。 - emendelski

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- HamiD · Accepted Answer

对于您的第一个问题，您需要添加：

align-items:flex-start; // add it to the body.

如果您需要为div添加宽度：

width:100%;

<!DOCTYPE html>
<html>
<head>
 <style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  
}

body {
  height: 100vh;
  display:flex;
  background: #060AB2;
  border: 3px solid yellow;
}

div{
    border:3px solid black;
    background:green; 
    width:100%;
}
</style>
</head>
<body>
<div>
  <img class="back-face" src="https://marina-ferreira.github.io/memory-game/img/js-badge.svg" alt="JS Badge" />
   <img class="back-face" src="https://marina-ferreira.github.io/memory-game/img/js-badge.svg" alt="JS Badge" />
 </div>
</body>
</html>