CODEWITHSUNDEEP
htmlcsssvgflexbox
user13641224
user13641224

Reputation: 161

The behavior of svg images in the flex box

I am currently studying css flexbox and I have a few questions about using svg images inside flex box. If a svg img is inside in the body of a html document, the width of the svg image is the same as the width of the body.When I put display:flex to the body tag, the svg image in centered vertically and the size is reduced, it doesn't behave the same as a jpg image which would expand it whole height to match the body's height. This is the first point which confuses me.

The second point is that when i put the svg inside a div, the svg will disappear.. I have read a stackoverflow post about this issue and it stated that it is because the svg didn't have an internal width/height set. But why the svg image didn't disappear in the case without the div? It is the same image meaning that the internal width/height are not set too. And If I put one more svg inside the div, the svg images magically appears with a tiny width and height.The sag images are aligned vertical instead of horizontally too. Why are they reappear when more then one svg is put inside the div?

I am sorry for my poor english as english is not my mother language.

Upvotes: 4

Views: 7786

Answers (1)

HamiD
HamiD

Reputation: 1090

For your first point, you need to add:

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

if you need to add a width for 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>

Upvotes: 2

Related Questions