ios - guia - Diseño de caja flexible CSS en iPad

inline flex

Question

Estoy tratando de obtener un diseño muy simple usando el modelo flex trabajando en iPad.

Tengo un div que contiene que se supone que centra los divs de contenido.

El código de muestra funciona según lo previsto en todos los navegadores y plataformas, EXCEPTO en el iPad (retina).

Usar varios emuladores de iPad en línea no replicará el problema. Solo he podido replicarlo en el iPad real. Aquí hay una captura de pantalla de cómo se ve:

Todos y cada uno de los consejos serán apreciados mucho.

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

Te faltan algunas propiedades del borrador anterior de 2009 (o las has nombrado incorrectas). Su contenedor CSS debería verse así:

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;
}

Sin embargo, tenga en cuenta que ninguno de los navegadores con una implementación de Flexbox 2009 (Android, Safari anterior, Firefox anterior) admiten el ajuste.