Flex-box

Rhydan1 Messages postés 391 Date d'inscription   Statut Membre Dernière intervention   -  
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,
Développant actuellement un site, je me sers de deux flexbox pour aligner verticalement deux éléments dans mon header.

Sur PC, aucun problème. Cependant sur mon portable (iPhone 4S, iOS 8) j'ai l'impression que la flex-box n'est pas reconnue, puisque les éléments sont collés en haut de page.

Ma question : Est-ce une mauvaise utilisation des flex-box la cause du soucis, ou simplement que l'attribut "flex-box" n'existait pas au moment de iOS8 et que donc Safari ne le reconnaît pas ?

Cordialement, un joli <body> :p


A voir également:

1 réponse

dugenou Messages postés 6087 Date d'inscription   Statut Contributeur Dernière intervention   1 452
 
Bonsoir,

Je ne suis pas un spécialiste du CSS, mais il semblerait que le préfixe -webkit- soit nécessaire :

Safari 3.1+
Safari Mobile (iOS 3.2+)


- Ancienne spécification (2009). Avec préfixe -webkit-
- Spécification finale depuis Safari 7. Avec préfixe -webkit-
0
Rhydan1 Messages postés 391 Date d'inscription   Statut Membre Dernière intervention   70
 
Du style -webkit-display: flex ?

--
0
dugenou Messages postés 6087 Date d'inscription   Statut Contributeur Dernière intervention   1 452 > Rhydan1 Messages postés 391 Date d'inscription   Statut Membre Dernière intervention  
 
Oui, c'est ce que j'ai trouvé sur : www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
0
Rhydan1 Messages postés 391 Date d'inscription   Statut Membre Dernière intervention   70
 
Mmh j'ai bien essayé de maintes façons, mais malheureusement cela ne fonctionne pas sur iPhone 4s :/
0
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
Étrange, IOS 8 semble supporter correctement flexbox avec le prefixe webkit : https://caniuse.com/#feat=flexbox

Sinon peut être en essayant de mélanger l'ancienne et la nouvelle syntaxe : https://css-tricks.com/using-flexbox/
0