html - content - flex-grow

Problema de Safari con justify-content: flex-end; alinear elementos: flex-end;

Question

Estoy diseñando un diseño de mensajería y estoy luchando por arreglar algunas cosas en Safari ya que parece ser un problema de compatibilidad.

http://animgram.com/fb/index.html Si abre este enlace en Google Chrome y Safari. Google Chrome es la vista correcta, pero en Safari no se muestra correctamente.

Estoy luchando por establecer esta clase.

.self {
justify-content: flex-end;
align-items: flex-end;
}

Tenga en cuenta: solo Safari es el problema. IE, Chrome y Firefox están perfectamente bien.

Answer 1

Safari <7.0 solo tiene una implementación de la antigua especificación Flexbox 2009, que es muy diferente de la especificación moderna:

.foo {
    display: -webkit-box;
    -webkit-box-pack: start; /* justify-content */
    -webkit-box-align: start; /* align-items */
}

Esto podría ser útil: https://gist.github.com/cimmanon/727c9d558b374d27c5b6