+ 1

Flexbox issues

I'm trying out some flexbox code. It works fine in IE but the flexbox code seems to be ignored by Chrome. I'm using the most recent versions of IE and Chrome. Any ideas?

html5 css3

26th Feb 2017, 8:14 PM

Richard

6 Answers

+ 3

You must prefix the flexbox properties with ( at least ) '-webkit-' in addition to the normal declaration ( and also the value 'flex' of 'display' property must be duplicate to '-webkit-box' ). To easily handle this compatibility stuff of prefixing properties, you can use some online "css prefixer" like this one: http://www.cssdrive.com/cssautoprefixer/

26th Feb 2017, 8:57 PM

visph

+ 2

Else post your code, or a link to it: it's easiest to debug something that we can study ;)

26th Feb 2017, 9:24 PM

visph

+ 2

Can you describe what you expect ( behavior in ie ), and how different Chrome is from? ( maybe post links to screenshots: I've not easily a window/ie under the hand :P ) I supposed you run Chrome under windows? Have you tested how display others, as Firefox? Desktop and mobile devices? All those details could have their weightiness ( it's not impossible, for example, that ie support badly Flex, and what you expect isn't the normal behavior ;) )

27th Feb 2017, 7:48 AM

visph

Thank you for that, visph. I did try the webkit prefix and a bunch of others but they didn't make any difference. it's strange because I just cut and pasted the code from a tutorial. I think I'll try the prefixer you suggested.

26th Feb 2017, 9:07 PM

Richard

Here is the relevant css and html .flex-container { display: -webkit-flex; /* NEW - Chrome */ display: flex; width: 400px; height: 250px; background-color: lightgrey; } .flex-item { background-color: cornflowerblue; width: 100px; height: 100px; margin: 10px; } <!DOCTYPE html> <html> <head> <title>Page Title</title> <script type="text/javascript" src="js/test.js"></script> <link rel="stylesheet" type="text/css" href="css/test.css"> </head> <body> <div id="container"> <div id="box"> </div> </div> <header> <nav> <ul> <li>Your menu</li> </ul> </nav> </header> <div class="flex-container"> <div class="flex-item">flex item 1</div> <div class="flex-item">flex item 2</div> <div class="flex-item">flex item 3</div> </div> <footer> <p>Copyright 2009 Your name</p> </footer> </body> </html>

27th Feb 2017, 7:15 AM

Richard

Ok, the issue I am having as nothing to do with the code but the server. Shutting down the services and then starting them again makes the page display as expected. I don't know why it would impact only in Chrome and not IE, but that seems to have resolved the issue.

5th Mar 2017, 12:13 PM

Richard