L’objectif :
Ce code fonctionne pour Chrome, Firefox et Edge :
.single__portfolio__photos{
display: flex;
flex-wrap: wrap;
padding: 0 1rem 1rem;
column-gap: 1rem;
row-gap: 1rem;
width: calc(100% - 2rem);
.single__portfolio__photos__brick{
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
height: 250px;
min-width: 150px;
}
}
Mais pas sur Safari, voici le résultat :
Après plusieurs recherche :
Flexbox est une technologie CSS3. Cela signifie qu’il est relativement nouveau et que certains navigateurs ne prennent pas entièrement en charge les propriétés flexibles.
Voici un aperçu :
- IE 8 et 9 ne prennent pas en charge flexbox. Si vous souhaitez utiliser les propriétés flex dans ces navigateurs, ne perdez pas votre temps. Un polyfill flexbox a fait le tour pendant un certain temps, mais il n’a pas bien fonctionné et n’est plus maintenu.
- IE 10 prend en charge une version précédente de flexbox et nécessite des préfixes de fournisseur . Sachez que certaines propriétés de la spécification actuelle ne sont pas prises en charge dans IE10 (telles que
flex-grow
,flex-shrink
etflex-basis
). Voir l’ index des propriétés Flexbox 2012 . - IE 11 est bon, mais bogué. Il est basé sur la norme flexbox actuelle . Voir l’ onglet PROBLÈMES CONNUS sur cette page pour certains des problèmes. Voir aussi : la propriété flex ne fonctionne pas dans IE
- Avec Chrome, Firefox et Edge, vous êtes bon partout. Vous trouverez des bogues mineurs et des incohérences, mais il existe généralement des solutions faciles. Vous devez être conscient du dimensionnement flexible minimal implicite , qui provoque parfois des problèmes de dimensionnement et de barre de défilement.
- Les versions 9 et supérieures de Safari prennent en charge la spécification flexbox actuelle sans préfixes. Cependant, les anciennes versions de Safari nécessitent des
-webkit-
préfixes. Parfoismin-width
etmax-width
causent des problèmes d’alignement qui peuvent être résolus avecflex
des équivalents. Voir Les éléments Flex ne s’empilent pas correctement dans Safari
Source : https://stackoverflow.com/questions/35137085/flexbox-code-working-on-all-browsers-except-safari-why
Le code final :
.single__portfolio__photos{
display: flex;
flex-wrap: wrap;
padding: 0 1rem 1rem;
column-gap: 1rem;
row-gap: 1rem;
width: calc(100% - 2rem);
.single__portfolio__photos__brick{
flex: 1 1 24rem;
height: 250px;
}
}