Why does adding display:inline-flex mess with the vertical aligning of these buttons?
Notice in the code that the three buttons aren't aligned in the y direction, but changing the 'display: inline-flex' property to 'display: inline' fixes that problem. Why?
:root { --color-primary: green; --btn-padding-x: 1rem; --btn-padding-y: 0.5rem; --border-radius: 0.5rem; --btn-stroke-width: 0.1rem; font-family: 'Inter Variable', sans-serif;}.btn { border-radius: var(--border-radius); padding: var(--btn-padding-y) var(--btn-padding-x); background-color: var(--color-primary); color: white; display: inline-flex; /* toggle this to see the effect */ /* FIX ALIGNMENT vertical-align: middle; */}.icon-container { width: 40px;}svg { stroke: white; stroke-width: var(--btn-stroke-width); fill: none;}.wrapper { background-color: gold;}<div class="wrapper"> Some text before the buttons<button class="full-width btn btn-primary btn-high"><span>Default</span></button><button class="btn"><div class="icon-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" /></svg></div><span>Icon L</span></button><button class="btn"><span>Icon R</span><div class="icon-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" /></svg></div></div>My understanding was that display: inline-flex is equivalent to saying "this element is display: inline to all its siblings, but its children are all governed by flexbox". But in that case, adding this property to .btn shouldn't mess with its vertical aligning?
i.e there should be no difference in the vertical aligning of the buttons between writing:
.btn {display: inline-flex;}and
.btn {display: inline;}