Układ CSS Flexible Box na iPadzie

Question

Próbuję uzyskać bardzo prosty układ przy użyciu modelu flex działającego na iPadzie.

Posiadam zawierający element div, który ma na celu wyśrodkowanie zawartości div.

Przykładowy kod jest zgodny z zamierzonymi we wszystkich przeglądarkach i platformach, Z WYJĄTKIEM na iPadzie (siatkówce).

Korzystanie z różnych emulatorów iPad online nie spowoduje powtórzenia problemu. Mogłem tylko powielić to na rzeczywistym iPadzie. Oto zrzut ekranu jak to wygląda:

Wszelkie porady będą mile widziane bardzo dużo.

CSS:

.container { 
width: 510px; 
height: 310px; 
background: red; 
display: flex; 
display: -webkit-flexbox; 
display: -ms-flexbox; 
display: -webkit-flex; 
flex-direction: row; 
flex-wrap: wrap; 
-webkit-box-pack: center; 
-moz-box-pack: center; 
-ms-flex-pack: center; 
-webkit-justify-content: center; 
justify-content: center; 
-webkit-flex-align: center; 
-ms-flex-align: center; 
-webkit-align-items: center; 
align-items:center; 
border: 2px solid; 
padding: 5px; 
margin: 0; 
} 

.content { 
float: left; 
width: 150px; 
height: 150px; 
background: green; 
border: 2px solid; 
padding: 0; 
margin: 0; 
} 

.content2 { 
float: left; 
width: 150px; 
height: 150px; 
background: blue; 
border: 2px solid; 
padding: 0; 
margin: 0; 
} 

HTML:

<div class="container"> 
<div class="content"> 
<p>Content</p> 
</div> 
<div class="content2"> 
<p>Content2</p> 
</div> 
</div> 

Answer 1

Brakuje niektórych właściwości ze starego projektu 2009 (lub ich nazwie źle). Kontener CSS powinien wyglądać następująco:

http://cssdeck.com/labs/ci9imeed

.container { 
    width: 510px; 
    height: 310px; 
    background: red; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-pack: center; 
    -moz-box-pack: center; 
    -ms-flex-pack: center; 
    -webkit-justify-content: center; 
    justify-content: center; 
    -webkit-box-align: center; 
    -moz-box-align: center; 
    -ms-flex-align: center; 
    -webkit-align-items: center; 
    align-items: center; 
    border: 2px solid; 
    padding: 5px; 
    margin: 0; 
} 

jednak pamiętać, że żadna z przeglądarek z realizacji 2009 schematu flexbox (Android, starszy Safari, starszy Firefox) owijania wsparcie.