0

I am using a flexbox layout that is usually presented as a row but when the screen is a certain width it switches to column. This works fine in Chrome, Firefox, Safari and Edge but on IE 11 the flex elements will not center even though I am using justify-content: space-around;

I have looked at https://github.com/philipwalton/flexbugs and other websites that list flexbox bugs and I can't seem to find the solution.

I have distilled it down to a simple example to demonstrate the problem.

First we have a container that spans the width of the screen with the following properties:

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-align: center;
  width: 100%;
}

Then inside it we have four cells with the following properties:

.cell {
  flex-grow: 2;
  text-align: center;
  display: inline-block;
  background-color: green;
  margin: 5px auto;
  min-width: 50px;
  max-width: 20%;
}

On IE the four cells are aligned left, but on any of the other browsers the cells are center aligned.

Here is an artist's impression of the situation

An artists impression of the situation

I have created a JSFiddle that demonstrates the issue at https://jsfiddle.net/8w1gf7vx/4/

Sean Dawson
  • 5,587
  • 2
  • 27
  • 34
  • See this post on SO : http://stackoverflow.com/questions/21600345/flexbox-and-internet-explorer-11-displayflex-in-html – Vincent G Mar 30 '16 at 21:32
  • Maybe you should check this http://caniuse.com/#feat=flexbox – drosam Mar 30 '16 at 21:32
  • I would look up 'flex' at W3C.com under css. All tags including css usually have a listing of browsers and if they respond to a given tag - or not. You will find that IE is way behind the curve in terms of the latest html/css commands. I do not think IE even accepts 'gradient' and 'rotate' commands. Personally I use Goggle Chrome or Firefox, which seem up to date on the latest html/css/js. –  Mar 30 '16 at 21:38
  • Keep in mind that Flexbox is not a standard yet and it could simply be that IE doesn't support it or doesn't support it fully. – Scott Marcus Mar 30 '16 at 21:43
  • 1
    @Sparky256 Do yourself a favor and don't read w3schools. It's only misinformation. – Oriol Mar 30 '16 at 21:54
  • 1
    @Sparky256: _"I just checked W3schools.com"_ - well that's your first mistake right there :-) http://www.w3fools.com/ - seriously, flexbox has quite good browser support in the latest versions of all important browsers. It _is_ usable in practice today (if one includes appropriate fallbacks.) – CBroe Mar 30 '16 at 21:55
  • If you want reliable information about browser support of different CSS features, then you should rather check http://caniuse.com/ Plus the MDN also has quite useful browser compatibility information for most CSS properties (plus for which browser you still have to use vendor prefixes.) – CBroe Mar 30 '16 at 21:57
  • @CBroe. Comments understood. Thanks for the info. –  Mar 31 '16 at 19:18

1 Answers1

2

You are using the wrong property - justify-content is for alignment on the main axis. Your flex-direction is column, therefor the main axis goes from top to bottom - and so all justify-content does here is influence the distribution of space above and below your items.

You want to align your items on the cross axis - and the property to achieve that is align-items.

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

https://jsfiddle.net/8w1gf7vx/6/

text-align: center; and display:inline-block from the items can be removed - unless you want to use those as a fallback for browsers that don't understand flexbox. (I suspect they might be the reason that what you had seemed to work as intended in other browsers. As Oriol pointed out in comment, that's rather due to margin-left/-right being auto - and that IE doesn't seem to support that.)

http://flexboxfroggy.com/ is a nice way to get a better understanding of what the different flex properties do, in the form of a little game - might be worth a look for anyone who still struggles a bit with flexbox now and then (and that includes myself ;-)

Disclaimer: I am not affiliated with that site in any way, I just think it is quite useful in gaining a better understanding of flexbox.

CBroe
  • 91,630
  • 14
  • 92
  • 150
  • 1
    It's true that there are some unnecessary properties, but the auto margins on the flex items should center them properly. The fault is that IE ignores the auto margins, not that the code is wrong. – Oriol Mar 30 '16 at 21:49
  • @Oriol: Yeah, thanks - the auto margins might rather have been the reason he got the expected results in other browsers. – CBroe Mar 30 '16 at 21:52
  • Thanks! Looks like it was the auto margins that got me. This has definitely solved this piece of the puzzle, now onto the other flexbox bugs! – Sean Dawson Mar 30 '16 at 21:58