Personnaliser l'espace entre les éléments flexibles

Question

Je suis presque satisfait du résultat obtenu avec justify-content: space-between, je voudrais juste avoir moins d'espace entre les deux derniers éléments flexibles.

J'ai essayé de calculer une marge gauche négative pour le dernier élément avec calc(), mais cela ne fonctionne pas entièrement : sur mon navigateur en plein écran, les deux derniers éléments sont séparés par plus que le 1em prévu, puis en réduisant la fenêtre, ils se rapprochent jusqu'à se toucher. Et en rétrécissant davantage, le dernier élément rebondit.

.belt {
  display: flex;
  justify-content: space-between;
  padding: 1em;
}

.belt > * {
  min-width: 10em;
  border: solid orange;
}

.belt > button {
  margin-left: calc((42em - 100%) / 3 + 1em);
}

  LOGO
  [_______________|Q]
  Se connecter
  Cart

Le calcul que j'ai fait :

• Pour rendre le calcul possible en premier lieu, j'ai dû définir une largeur pour les éléments et j'ai utilisé min-width: 10em; qui fonctionne également comme une width car le contenu des éléments est inférieur à 10em
• 100% moins les 40em des quatre éléments, moins les deux marges de 1em du conteneur, divisé par 3 (les espaces entre les quatre éléments) ---> devrait être plus ou moins l'espace entre les éléments lors de l'utilisation de justify-content: space-between
• définir la marge gauche du dernier élément avec une valeur négative étant le résultat de l'expression ci-dessus devrait aboutir à n'avoir aucun espace entre les deux derniers éléments
• étape finale : ajouter 1em

Qu'est-ce qui ne va pas avec cette approche et quelle serait une bonne manière d'obtenir un espace de 1em entre les deux derniers éléments ?

PS : J'ai découvert cette propriété gap, qui malheureusement ne serait pas accessible à 99 % des utilisateurs de Safari, donc pour le moment ce n'est pas une option.

Answer 1

Je pense que vous pouvez simplement utiliser margin:auto sur le deuxième élément et votre marge 1em sur le dernier élément :

.ceinture {
  display: flex;
  justify-content: space-between;
  padding: 1em;
}

.ceinture > * {
  min-width: 10em;
  border: solid orange;
}

.ceinture > button {
  margin-left: 1em;
}

.ceinture > div {
  margin:0 auto;
}

  LOGO
  [_______________|Q]
  Se connecter
  Panier