7

Other SO posts like this did not solve our issues with justify-content on iOS Chrome and Safari browsers. The content is not evenly distributed within the parent container when using the space-between value.

As you can see from this JSFiddle, the justify-content property works as expected on the desktop, but not on mobile.

We tried Chrome and Safari on iOS 8.x, and neither distributed the children evenly.

Code:

<div id='app_page'>
    <div class='button_box'>
        <div class='share_icon'></div>
        <div class='share_icon'></div>
        <div class='share_icon'></div>
        <a href='/' class='download' target='_blank'>GET</a>
    </div>
</div>

#app_page { width: 100% }

#app_page .button_box { 
    width: 100%; 
    box-sizing: border-box; 
    display: flex; 
    justify-content: space-between;
}

#app_page .button_box .download { 
    vertical-align: top; 
    background: black; 
    width: 36px; 
    height: 36px; 
    line-height: 36px; 
    display: inline-block; 
    color: #fff; 
}

#app_page .button_box .share_icon { 
    cursor: pointer; 
    display: inline-block; 
    background: black; 
    height: 36px; 
    width: 36px;
}
Community
  • 1
  • 1
Crashalot
  • 33,605
  • 61
  • 269
  • 439
  • It does work in Safari on the iOS 9.0 simulator and in Safari on iOS 9.1. – Thomas Nov 12 '15 at 00:44
  • Cannot test it right now, but I remember that I had to use vendor prefixes for Safari mobile on iOS 8.x for flexbox. Updated the fiddle for you to check: http://jsfiddle.net/3jauqatg/6/ – Thomas Nov 12 '15 at 00:46
  • @Thomas that fixed it! Could you please add an answer so we can credit you? You're awesome; thanks again! – Crashalot Nov 12 '15 at 00:50
  • You can upvote Michael's answer, too :) – Thomas Nov 12 '15 at 00:52

2 Answers2

11

For Webkit-Browsers below iOS 9.0 you need to use vendor prefixes: 

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

Your snippet:

#app_page { width: 100% }

#app_page .button_box { 
    width: 100%; 
    box-sizing: border-box; 
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

#app_page .button_box .download { 
    vertical-align: top; 
    background: black; 
    width: 36px; 
    height: 36px; 
    line-height: 36px; 
    display: inline-block; 
    color: #fff; 
}

#app_page .button_box .share_icon { 
    cursor: pointer; 
    display: inline-block; 
    background:black; 
    height: 36px; 
    width: 36px;
}
<div id='app_page'>
    <div class='button_box'>
        <div class='share_icon'></div>
     <div class='share_icon'></div>
     <div class='share_icon'></div>
  <a href='/' class='download' target='_blank'>GET</a>
 </div>
</div>
Thomas
  • 2,338
  • 2
  • 23
  • 32
3

Although Safari 9 supports all standard flex properties, with Safari 8 and older you'll need to use vendor prefixes.

For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.

For flexbox browser support details see here: http://caniuse.com/#search=flexbox

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701