web-dev-qa-db-fra.com

Comment faire en sorte que CSS justifier-contenu: espace-replier uniformément sur l'espace-entre Safari?

Je construis une page Web et exécute des tests sur différents navigateurs. L’une des conceptions implique un flexbox et un espace égal, je sais que ce n’est pas encore largement supporté, alors je suis en utilisant l'espace-entre comme ceci:

.some_element {
display:flex;
justify-content:space-between;
justify-content:space-evenly;
}

Le code ci-dessus fonctionne correctement sous: Firefox, Chrome, IE11, Edge mais échoue sous Safari.

Safari comprend et reconnaît le space-evenly mais ne fait rien avec elle, autrement dit, le résultat est le même que: justify-content:initial;

Officiellement, Safari ne supporte pas -webkit-justify-content donc je pensais que je serais un fendoir et que j'essaierais le repli comme ceci:

.some_element {
    display:flex;
    justify-content:space-between;
    -webkit-justify-content:space-evenly;
    -moz-justify-content:space-evenly;
    }

Mais encore une fois, Safari le comprend et le rend comme initial. La même chose se passe sur iOS… .qui rend la conception de mon site Web disloquée….

Esthétiquement, l’espace est plus beau et j’aimerais vraiment en profiter sur les navigateurs qui le supportent, je ne tiens donc pas à le laisser tomber à cause de Apple .... Par contre Apple sont une partie importante des visiteurs, je ne peux donc pas ignorer le problème et laisser la page restituer avec le look initial.

Merci.

htmlcsshtml5css3safari
22
Emil Borconi

@supports n'est d'aucune aide, voir mon commentaire ci-dessus (hé Apple, pouvez-vous me rappeler quel était le but de cette fonctionnalité? Sigh) mais vous pouvez avoir la même présentation avec :pseudole sable space-between.
La seule contrainte est que vous ne pouvez pas utiliser de pseudos sur le conteneur flex pour autre chose.

➡️ Codepen

Code Code pertinent:

.evenly-like {
  display: flex;
  justify-content: space-between;

  &:before,
  &:after {
    content: '';
    display: block;
  }
}

Avec 5 éléments, il y a 6 "espaces" de même largeur avec space-evenly et 4 avec space-between (et la moitié + 4 + la moitié avec space-around).
En créant 2: pseudos sur le conteneur Flex et considérés comme des éléments Flex par la puissance de Flexbox, avec space-between _ il y a maintenant 5 + 2 = 7 éléments donc 6 "espaces" de même largeur, problème résolu.

➡️ Extrait complet:

/* /!\ Pasted from compiled Scss in Codepen with Autoprefixer. Your browserslist is probably not as complete as that one :) */

.parent {
  display: -webkit-box;
  display: -ms-flexbox;
  display:     flex;
  border: 1px solid darkred;
  margin-bottom: 30px;
}
.parent.evenly {
  -webkit-box-pack: space-evenly;
     -ms-flex-pack: space-evenly;
   justify-content: space-evenly;
}
.parent.around {
  -ms-flex-pack: distribute;
      justify-content: space-around;
}
.parent.between {
  -webkit-box-pack: justify;
     -ms-flex-pack: justify;
   justify-content: space-between;
}
.parent.evenly-like {
  -webkit-box-pack: justify;
     -ms-flex-pack: justify;
   justify-content: space-between;
}
.parent.evenly-like:before,
.parent.evenly-like:after {
  content: '';
  display: block;
  width: 2px;
  background-color: red;
}

.item {
  padding: 10px;
  color: white;
  background-color: slateblue;
  outline: 1px dotted darkblue;
}
<h1>space-evenly</h1>
<div class="parent evenly">
  <div class="item">1 lorem</div>
  <div class="item">2 lorem</div>
  <div class="item">3 lorem</div>
  <div class="item">4 lorem</div>
  <div class="item">5 lorem</div>
</div>

<h1>Mimicking space-evenly with space-between: and :pseudos</h1>
<div class="parent evenly-like">
  <div class="item">1 lorem</div>
  <div class="item">2 lorem</div>
  <div class="item">3 lorem</div>
  <div class="item">4 lorem</div>
  <div class="item">5 lorem</div>
</div>

<hr>

<h1><i>space-around</i></h1>
<div class="parent around">
  <div class="item">1 lorem</div>
  <div class="item">2 lorem</div>
  <div class="item">3 lorem</div>
  <div class="item">4 lorem</div>
  <div class="item">5 lorem</div>
</div>

<h1><i>space-between</i></h1>
<div class="parent between">
  <div class="item">1 lorem</div>
  <div class="item">2 lorem</div>
  <div class="item">3 lorem</div>
  <div class="item">4 lorem</div>
  <div class="item">5 lorem</div>
</div>
35
FelipeAls