1

I'm struggling to understand the behaviour of the following pen (but I already have a workaround): https://codepen.io/nicoespeon/pen/BOamdJ

There are 3 flexbox containers:

  1. the first contains only text
  2. the second contains a <svg> element and some text
  3. the third contains some text and a <svg> element

I expect all of them to be aligned. But the second box is moving up.

enter image description here

Note: I know that if I wrap all of them in a flex container (e.g. set display: flex | inline-flex; to body), they get aligned. But I don't understand how the <svg> element is impact its flex container in the second box.

Any idea?

nicoespeon
  • 309
  • 1
  • 8

3 Answers3

4

This has been answered here.

It's due to the fact that display: inline-flex; is treated just like any other inline element, with default vertical alignment being baseline. Notice that the bottom of the SVG is aligned with the text inside the previous div. If you add vertical align: top to the display: inline-flex items, they'll all be aligned as expected.

Hope that helped! I can tell you that this issue confounded the heck out of me when I first encountered it.

Cheers!

LICHEN
  • 566
  • 1
  • 4
  • 10
1

Apply display:flex; for body tag. It works.

div {
  height: 100px;
  padding: 0 5px;
  margin: 0 5px;
  
  color: white;
  background-color: blue;
  
  display: inline-flex;
  align-items: center;
}

svg {
  background-color: red;
}

body {
  display:flex;
}
<div>Without SVG</div>
<div>
  <svg height=40 width=20></svg> After SVG
</div>
<div>
  Before SVG <svg height=40 width=20></svg>
</div>

https://jsfiddle.net/Sampath_Madhuranga/gye5Lz4v/3/

This works for you.

VSM
  • 1,765
  • 8
  • 18
  • Thanks for your feedback. I found the workaround as explained in the issue (will make it clearer though). My question is: why is that happening? I don't understand why the `` element is impacting its flex container so we need to wrap all of this into another flex container. Am I missing something? – nicoespeon Aug 21 '18 at 12:56
  • @nicoespeon, It wasn't happened due to svg or any other issue. Container div of the elements should be a flex container, otherwise it doesn't work properly. You need to understand the basic application of flex properties. Please visit link below. https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox – VSM Aug 21 '18 at 16:59
  • Yep, I understand I should put the div boxes into a flex container if I want to control the flexible layout of them. In the case I presented though, div boxes are the flex containers. And I was surprised the second box move up because it contains an SVG, while the others don't. I'm wondering why this happens =) – nicoespeon Aug 21 '18 at 18:22
  • @nicoespeon, Not only for svg, I think it doesn't work for any element inside that div such as img, input etc..check. – VSM Aug 21 '18 at 18:47
  • You're right, I think if you don't provide a flex container to the div boxes, they get positioned regarding what's inside, even though they are flexbox containers themselves. I was surprised the content was impacting the div position, but it's not just SVG. I'm closing the issue accepting your answer as it's the correct way to do it. Thanks! – nicoespeon Aug 22 '18 at 14:40
  • @nicoespeon, It's my pleasure. – VSM Aug 22 '18 at 16:16
1

Check this one i hope help you and solved your issue

div {
      height: 100px;
    padding: 0 5px;
    color: white;
    background-color: blue;
    display: inline-flex;
    align-items: center;
    float: left;
    margin: 3px;
}

svg {
  background-color: red;
}
<div>Without SVG</div>
<div>
  <svg height=40 width=20></svg> After SVG
</div>
<div>
  Before SVG <svg height=40 width=20></svg>
</div>
Ketan
  • 128
  • 7
  • Thank you for your reply, but I already have a proper workaround (cf. my message & VSM's reply). I'm looking for the reason behind this behaviour. Also, I don't want the `
    `s to be float in that case. It has unexpected side effects. I still want them to be flexboxes.
     – nicoespeon Aug 21 '18 at 12:59