我目前正在学习CSS flexbox,并且有几个关于在flexbox中使用SVG图像的问题。
如果一个SVG图像位于HTML文档的主体内,那么SVG图像的宽度与主体的宽度相同。当我将
第二个要点是,当我将SVG放在一个div里面时,SVG就会消失。我读了一篇关于这个问题的stackoverflow帖子,它指出这是因为SVG没有设置内部宽度/高度。但是为什么在没有div的情况下SVG图像不会消失呢?这是相同的图像,也就是说内部宽度/高度也没有设置。如果我再放一个SVG到div里面,那么SVG图像会神奇地出现并带有微小的宽度和高度。这些SVG图像垂直对齐而不是水平对齐。为什么当多于一个SVG放置在div中时,它们会重新出现?
抱歉我的英语不好,因为英语不是我的母语。
display:flex
应用于标签时,SVG图像在垂直居中并且大小被缩小了,它与会将整个高度扩展到与主体的高度相匹配的JPEG图像不同。这是让我感到困惑的第一个要点。第二个要点是,当我将SVG放在一个div里面时,SVG就会消失。我读了一篇关于这个问题的stackoverflow帖子,它指出这是因为SVG没有设置内部宽度/高度。但是为什么在没有div的情况下SVG图像不会消失呢?这是相同的图像,也就是说内部宽度/高度也没有设置。如果我再放一个SVG到div里面,那么SVG图像会神奇地出现并带有微小的宽度和高度。这些SVG图像垂直对齐而不是水平对齐。为什么当多于一个SVG放置在div中时,它们会重新出现?
抱歉我的英语不好,因为英语不是我的母语。
width: 100%
或flex-basis: 100%
。 - emendelski