svg 图像在弹性框中的行为答案

【问题标题】：The behavior of svg images in the flex boxsvg 图像在弹性框中的行为
【发布时间】：2020-10-23 20:46:19
【问题描述】：

我目前正在学习 css flexbox，我有一些关于在 flex box 中使用 svg 图像的问题。如果是svg img is inside in the body of a html document，则svg 图像的宽度与正文的宽度相同。当我将display:flex 放入正文标记svg image in centered vertically and the size is reduced 时，它的行为与jpg image which would expand it whole height to match the body's height 不同.这是让我感到困惑的第一点。

第二点是当我输入the svg inside a div, the svg will disappear.。我读过stackoverflow post about this issue，它说这是因为 svg 没有设置内部宽度/高度。但是为什么在没有 div 的情况下 svg 图像没有消失呢？这是相同的图像，意味着内部宽度/高度也没有设置。 And If I put one more svg inside the div, the svg images magically appears with a tiny width and height.凹陷图像垂直而不是水平对齐。为什么在 div 中放入多个 svg 时它们会重新出现？

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

【问题讨论】：

首先，尝试将宽度/高度属性添加到您的标记中。您的问题与 SVG 无关。关于弹性。 flex 中的每个元素都表现为列或行。如果你想采用 100% 宽度添加 width: 100% 或 flex-basis: 100%。

标签： html css svg flexbox

【解决方案1】：

对于您的第一品脱，您需要添加：

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>

【讨论】：