Flexbox ignored on mobile

Question

I used flexbox to spread the list items in the footer navigation across the width of footer.

It is being displayed correctly in my browser and also in Chrome's mobile emulation. However it is ignored on any mobile device I've tested with (iPhone, iPad, Samsung tablet).

Does anyone see anything obvious wrong with the code I'm not aware of? Below is the CSS/LESS snippet I'm using.

ul {
   display: flex;
   justify-content: space-between;
   width: 100%;
   padding: 0;

   li {
      padding: 0;
   }
}

Unfortunately I cannot on this project... :-( I'm aware that this makes it so much more difficult to figure why it's not working. Just thought I post it here anyway... perhaps it's something obvious I don't know. — The Gmo, Oct 14 '15 at 13:05
browser compatibility: http://stackoverflow.com/a/35137869/3597276 — Michael Benjamin, Mar 19 '16 at 12:21

Ankit Chaudhary · Accepted Answer · 2020-06-14T17:09:46.487

This is happening as display:flex & justify-content: space-between are not compatible in all type of browsers.So we should have a cross-browser compatible CSS like this:

ul {

  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;

  -webkit-justify-content: space-between; 
  justify-content: space-between; 

   width: 100%;
   padding: 0;

   li {
      padding: 0;
   }
}

Browser Support for display:flex

IE 11
Edge
FireFox 22+
Chrome 29+
Safari 9+
Opera 17+
Android Browser 4.4+

Browser Support for justify-content: space-between

IE 11
Edge
FireFox 20+
Chrome 52+
Safari 9+
Opera 12.1+
Android Browser 5.6+

Useful Links:

https://caniuse.com/#feat=flexbox

https://caniuse.com/#feat=mdn-css_properties_justify-content_flex_context

https://css-tricks.com/using-flexbox/

Any reference or external links about this incompatibility? Is this a bug/will be fixed? — BassMHL, May 26 '20 at 02:32

Flexbox ignored on mobile

1 Answers1