Flexbox and IE 10
I have been using flexbox a lot in the past couple of months and it has made a huge difference in laying out my pages. In order to get the best support I am using Bourbon's mixins to provide the syntaxs that support FireFox, Chrome, and IE 10+. Now while the IE 10 2011 syntax support has not caused me too many issues, in true fasion, I have run into one issue (which once know, it simple enough to avoid).
I have a piece of content like this:
<div class="site-application-header"> <span>Something on the left</span> <span>Something on the right</span> </div>
While this can be handled with things like floating or positioning, I prefer to use FlexBox as it provide a more flexible solution and to me, is easier to understand by reading the code. I used the
justify-content: space-between; FlexBox property (or
-ms-flex-pack: justify; for IE 10) and everything looked fine except in IE 10.
What ended up being the issue is that I was using
span elements and in order for this to work properly, the elements need to be either
inline-block. I ended up switching the code to:
<div class="site-application-header"> <div>Something on the left</div> <div>Something on the right</div> </div>