28172 sujets

CSS et mise en forme, CSS3

Flex, hack safari et android 4.3

Bonjour

J’essaie de réaliser une page en utilisant " Flex" , tout fonctionne.....!

Sauf sur safari 5.1.7 et Android 4.3 (en version paysage)

J’ai essayé bon nombre de solutions en vain, la dernière en date

@media screen and (-webkit-min-device-pixel-ratio:0) { 
#safari {display: block;} 
.wrapper {display:-webkit-box; display:flex;}


Toutes les sections sont en ligne (display:-webkit-box;)
Connaissez-vous une solution pour remédier à ce problème afin de faire passer les sections les une sous les autres en fonction de la largeur de l'écran ?

Si cela peut vous aider, le code html et le code CSS incorporé à la page sont à cette adresse.
http://www.locations-pays-basque.fr/35.html

Merci
Bonne journée
Modérateur
Bonjour,

Est-ce que toutes tes sections doivent avoir la même largeur sur toutes les lignes ? ou bien est-ce que quand les sections passent à la ligne (par exemple 4 sections sur la première ligne et deux sections sur la deuxième ligne) elles peuvent avoir des largeurs différentes sur la deuxième ligne ? (dans le cas 4+2, les sections du dessous seraient alors deux fois plus larges).

La solutions dépend de ces contraintes.

Si elles peuvent être de largeurs différentes, tu peux considérablement simplifier tes css et écrire par exemple :

body{font:1rem/1.3 sans-serif;background-color:#fff;font-family:Verdana, Geneva, Arial, sans-serif;margin:0;height: 100%;}
html{height:100%}
header{background:yellow}
nav{background:green}
.conteneur{width:90%;margin:auto;background:red}
#pub{background:blue}
footer{background:pink}
.wrapper {display:flex;flex-wrap:wrap;}
section {min-width:250px;max-width:500px;flex:1;}


EDIT : ci-dessous une autre solution où on tient compte du fait qu'il y a 6 sections, et où on limite le nombre de colonnes à 3 en jouant sur la largeur max du conteneur et la largeur min des sections afin qu'il ne puisse pas y avoir plus de 3 sections par ligne.

EDIT 2 : et donc comme il y a 6 sections sur 1, 2 ou 3 lignes, on est alors certains qu'il y aura le même nombre de sections sur chaque ligne, et donc on sera certain qu'elles feront toutes le même largeur. Mais évidemment, si on a plus ou moins de 6 sections, on n'aura plus la certitude que toutes les sections feront la même largeur.

body{font:1rem/1.3 sans-serif;background-color:#fff;font-family:Verdana, Geneva, Arial, sans-serif;margin:0;height: 100%;}
html{height:100%}
header{background:yellow}
nav{background:green}
.conteneur{width:90%;max-width:900px;margin:auto;background:red}
#pub{background:blue}
footer{background:pink}
.wrapper {display:flex;flex-wrap:wrap;}
section {min-width:250px;flex:1;}

Amicalement,
Modifié par parsimonhi (04 Feb 2016 - 13:04)
Bonjour

Merci beaucoup parsimonhi

Je vais tester ce que tu m'as conseillé, mais mon problème demeure ?

Est ce que safari 5.1.7 et android 4.3 prenne en compte flex sans hack ?

Bonne am

Merci

Amicalement

BB
Modifié par africa (04 Feb 2016 - 13:52)
Tu peut te référer au site caniuse pour les navigateurs relativement récents à savoir si telle ou telle règle est supportée en tout ou partie et si les préfixe sont nécessaires. pour flex : http://caniuse.com/#search=flex (remarque que pour android 4.3, c'est avec les préfixes -webkit- et l'ancienne syntaxe Smiley cligne )
Modifié par gc-nomade (04 Feb 2016 - 14:20)
Modérateur
Bonjour,

Ci-dessous une solution un peu plus détaillée qui tient compte du fait que les deux premières colonnes sont de tailles différentes des autres dans l'exemple donné initialement.

EDIT : je voulais dire les deux premières sections.

Pour ce qui est des hacks, à ta place je n'en ferais pas ou alors simplement ceux avec le préfixe -webkit-. La conséquence est que tes sections seront simplement affichées les unes en dessous des autres sur les vieux navigateurs : très acceptable dans de nombreux cas.

body{font:1rem/1.3 sans-serif;background-color:#fff;font-family:Verdana, Geneva, Arial, sans-serif;margin:0;height:100%;}
html{height:100%}
header{background:yellow}
nav{background:green}
.conteneur{width:90%;max-width:1500px;margin:auto;background:#fed}
#pub{background:blue}
footer{background:pink}
.wrapper {display:flex;flex-wrap:wrap;}
/* 380px calculé à la louche pour que 1500px contienne 3,99 colonnes au maximum (marges + 380px * 3.99) */
section {display:block;flex:1.2;min-width:380px;}
section:nth-of-type(1) {background:#fc9;flex:1;min-width:304px;} /* 304px = 380px * 1 / 1.2 */
section:nth-of-type(2) {background:#f9c;flex:1.4;min-width:456px;} /* 456px = 380px * 1.4 / 1.2 */
section:nth-of-type(3) {background:#cf9;}
section:nth-of-type(4) {background:#c9f;}
section:nth-of-type(5) {background:#9fc;}
section:nth-of-type(6) {background:#9cf;}
/* 1280px calculé à la louche pour contenir 3,00 colonnes au minimum (marges + 380px * 3) */
@media (max-width:1280px)
{
	/* 290px calculé à la louche pour que 1280px contienne 3,99 colonnes au maximum (marges + 290px * 3.99) */
	section {min-width:290px;flex:1.3;}
	section:nth-of-type(1) {flex:1;min-width:203px;} /* 203px = 290px * 1 / 1.3 */
	section:nth-of-type(2) {flex:1.6;min-width:377px;} /* 377px = 290px * 1.6 / 1.3 */
}
@media (max-width:500px)
{
	/* plus qu'une seule colonne => on ajuste les largeurs min des colonnes */
	section {min-width:280px;}
	section:nth-of-type(1) {min-width:280px;}
	section:nth-of-type(2) {min-width:280px;}
}


EDIT : correction d'un bug dans le @media (max-width:500px)

Amicalement,
Modifié par parsimonhi (04 Feb 2016 - 17:30)
Administrateur
Bonjour,

- Safari 5.1.7 oh c'est sous Windows ? Tu peux oublier, c'est très vieux
- Android 4.3 ne supporte pas le multiligne, 'fin wrap. Il y a 3 types de navigateurs : sans support de flexbox, avec support de flexbox mais que sur 1 ligne ou 1 colonne et support complet (edit : cf le lien vers caniuse donné précédemment)
On peut encore acheter des Android 4.4 en France actuellement alors 4.3 j'imagine que c'était en vente il y a 6 mois, difficile de faire l'impasse Smiley decu
- Autoprefixer est un outil qui simplifie la vie : on a plus besoin de s'embêter ni avec les 3 syntaxes successives de Flexbox ni avec les préfixes ! Il faut le configurer 1 fois avec une liste des navigateurs à supporter et c'est fini, on peut passer son temps à des choses plus utiles (je privilégie toujours la variante "IE 10 et plus" plutôt que "les 3 ou 4 dernières versions")
Modifié par Felipe (04 Feb 2016 - 21:40)
Sujet clos
Aller à