Flex-box

Fermé
Signaler
Messages postés
382
Date d'inscription
jeudi 3 juillet 2014
Statut
Membre
Dernière intervention
2 avril 2017
-
Messages postés
2651
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
23 janvier 2022
-
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


1 réponse

Messages postés
6083
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
30 juillet 2021
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
Messages postés
382
Date d'inscription
jeudi 3 juillet 2014
Statut
Membre
Dernière intervention
2 avril 2017
69
Du style -webkit-display: flex ?

--
0
Messages postés
6083
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
30 juillet 2021
1 452 >
Messages postés
382
Date d'inscription
jeudi 3 juillet 2014
Statut
Membre
Dernière intervention
2 avril 2017

Oui, c'est ce que j'ai trouvé sur : www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
0
Messages postés
382
Date d'inscription
jeudi 3 juillet 2014
Statut
Membre
Dernière intervention
2 avril 2017
69
Mmh j'ai bien essayé de maintes façons, mais malheureusement cela ne fonctionne pas sur iPhone 4s :/
0
Messages postés
2651
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
23 janvier 2022
485
É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