[Résolu] Espacer des flex-items

La page https://www.alma-musica.net/html/repertoire-new.php?Noel2019 représente la liste des œuvres au programme d'un concert.
Pour chaque œuvre j'ai mis le nom et la photo de l'auteur, suivi de quelques fichiers permettant aux membres de la chorale d'apprendre cette œuvre, suivi du nom de l’œuvre
Les fichiers de travail sont représentés par des boutons. Les fichiers s'ouvrent par un clic sur le bouton.
Dans la ligne correspondant à la 5ème œuvre, il y a deux boutons verts au dessus l'un de l'autre représentant deux enregistrements différents de cette œuvre.
Ce que je voudrais faire -- si possible en CSS sans changer le HTML-- c'est écarter légèrement ces boutons pour faciliter l'utilisation sur une tablette ou un téléphone.
Ces bouton sont des flex-items, donc la solution doit être plutôt dans l'ajout d'un :before sur le deuxième bouton, mais je ne suis pas arrivé à faire quelque chose qui fonctionne.
Merci de votre aide.

Il faudrait je pense utiliser un margin-bottom sur le bouton de haut ou margin-top sur le bouton de bas, ou les deux à la fois.

En utilisant les médias querys pour spécifier l'application seulement aux smartphones et tablettes.

Yordi a écrit :
Hello,

Oui un simple margin, ajoute un flex-shrink: 0; pour s'assurer que ce ne soit pas l'image qui diminue en taille

Merci Yordi
Effectivement j'avais essayé un margin, mais c'est l'image qui avait changé de taille.

PapyJP a écrit :

mais c'est l'image qui avait changé de taille.

Oui c'est un "problème" que je reproche très souvent à Flexbox (et qui n'apparaît pas dans Grid Layout en passant).