[Résolu] Flexbox, align-self

Bonjour,

Petite difficulté que je partage avec vous.

J'ai 8 div gérées par flexbox.
J'ai appliqué au parent

justify-content: space-between;

Je souhaite que les 2 dernières div s'affichent sans appliquer justify-content: space-between; car l'espace qui les sépare est trop important.

Je pensais que ce code permettrait d'obtenir le résultat souhaité :

.conteneur div:nth-child(7),
.conteneur div:nth-child(8){
    align-self: flex-start;
}

Résultat actuel :



Résultat souhaité :



CodePen

Auriez-vous une piste à me donner ?

Merci

Hello,
Tu peux simplement appliquer un

margin-right: auto;

sur ton dernier élément
pour le width, je ferais un calc() qui serait plus propre je trouve :

.conteneur div {
    width: calc((100% / 3) - 2%);
}

Bonjour,

Tout dépend si on connait d'avance le nombre d'éléments ou pas !

Est-ce toujours 8 ?

Et est-ce toujours 3 colonnes ?

Amicalement,
Modifié par parsimonhi (10 Jan 2019 - 16:30)

Merci pour vos réponses.

@Yordi : je vais faire un test avec tes recommandations

@parsimonhi : le nombre d'éléments ne varie pas. 8 div s'affichent uniquement.
Elles ne s'affichent pas toujours en 3 colonnes (en version mobile, 2 ou 1 colonnes).
Modifié par MickFR (10 Jan 2019 - 16:44)

Bonjour,

C'est l'arlésienne de l'alignement des boites : comment afficher la dernière ligne !

Personnellement, j'utilise souvent une solution consistant à ajouter un certain nombre de boites invisibles de même largeur que les boites précédentes et de hauteur nulle. Ce nombre est le nombre de boites visibles moins 2 (donc 6 dans ton cas).

Ici un exemple avec un nombre quelconque de boites : https://jsfiddle.net/6e72oa7e/

Si tu connais le nombre de boites visibles d'avance, tu peux directement inclure les boites invisibles dans le html au lieu de le faire avec le code js. Et dans ce cas, il faudra aussi ajouter dans le css les styles que le code JS donne à ces boites invisibles.

EDIT: et bien sûr, dans ce cas, tu peux te passer de JS. De plus, je vois que dans ton cas, il te suffirait d'ajouter une seule boite invisible (si tu n'as jamais plus de 4 colonnes).

Amicalement,
Modifié par parsimonhi (10 Jan 2019 - 17:10)

@parsimonhi : merci Je vais analyser le code que tu as fourni.

@Yordi : pourrais-tu m'expliquer pourquoi, en ajoutant au dernier élément margin-right: auto, ce dernier vient se caler à côté de l'avant dernier élément ?

Le résultat correspond à ce que je souhaite obtenir mais je ne comprend pas pourquoi.

Merci
Modifié par MickFR (18 Jan 2019 - 14:11)

Bonjour,

Yordi a écrit :
Hello,
Tu peux simplement appliquer un

margin-right: auto;

sur ton dernier élément.

#Yordi: ta solution m'intéresse au plus haut point, mais je ne vois pas comment elle peut fonctionner ! Dans certaines conditions peut-être ! Mais lesquelles ?

Amicalement,

Flexbox permet ce genre de chose géniale.
Si ton container est en flex, tu peux jouer avec le margin et sa valeur auto pour centrer verticalement et/ou horizontalement !
Voici un exemple basic pour mieux comprendre, tu peux jouer un seul margin (top, right, bottom, left) pour bien visualiser

Bonjour,

Oui, mais ça ne marchera qu'avec un nombre de colonnes fixé d'avance.

J'avais compris ici qu'il pouvait y avoir un nombre de colonnes variable !

Amicalement,

parsimonhi a écrit :
Bonjour,

#Yordi: ta solution m'intéresse au plus haut point, mais je ne vois pas comment elle peut fonctionner ! Dans certaines conditions peut-être ! Mais lesquelles ?

Amicalement,

Apriori, je dirais que tu peux l'appliquer sur les :last-child

.item:last-child{margin-right: auto;}

Si ton parents est simplement initialisé comme cela:

.parent{
  display: flex;
  flex-flow: row wrap; /* Concatenation de flex-direction & flex-wrap */
}

Si ton dernier élément n'a pas assez d'espace, il passera simplement à la ligne avec le "wrap" de flexbox. Dans le pire des cas, même si ton :last-child est équivalent au dernier élément de ta colonnes, alors il y aura 1% de libre (qui est équivalent à ta marge) mais qui aura l'avantages si il est orphelin, sera aligné à gauche.

Autre chose, si tu applique déjà des marges à tes items, pourquoi faire en plus un justify-content: space-between ? (c'est d'ailleurs pour cela que calc((100% / 3) - 2%) serait plus robuste)

Perso, je trouve que ça fonctionne pas mal

Bonjour,

Yordi a écrit :

Apriori, je dirais que tu peux l'appliquer sur les :last-child

.item:last-child{margin-right: auto;}

Si ton parents est simplement initialisé comme cela:

.parent{
  display: flex;
  flex-flow: row wrap; /* Concatenation de flex-direction & flex-wrap */
}

Si ton dernier élément n'a pas assez d'espace, il passera simplement à la ligne avec le "wrap" de flexbox. Dans le pire des cas, même si ton :last-child est équivalent au dernier élément de ta colonnes, alors il y aura 1% de libre (qui est équivalent à ta marge) mais qui aura l'avantages si il est orphelin, sera aligné à gauche.

Pas l'air de marcher. Je regarde plus en détail et je te dirai si j'ai du nouveau.

Yordi a écrit :

Autre chose, si tu applique déjà des marges à tes items, pourquoi faire en plus un justify-content: space-between ? (c'est d'ailleurs pour cela que calc((100% / 3) - 2%) serait plus robuste)

Ce calc ne marchera que s'il y a 3 colonnes exactement me semble-t-il (et si l'on est sûr de ça, on a 50 000 autres solutions possibles). C'est là tout son problème !

Amicalement,

Bonjour,

Yordi a écrit :
Perso, je trouve que ça fonctionne pas mal

Bon, ok, si y a des medias-queries, évidemment (mais bon, oserais-je le dire, trop facile avec les medias-queries ! ).

Amicalement,

Si tu ne veux pas de media queries et des columns dynamique, alors utilises grid ????(couplé a un minmax(200px, 1fr)

Oui ça marche pas mal, par contre le

.item:last-child{margin-right: auto;}

ne sert à rien.
À noter qu'on ne se sert pas de flex par cette technique, elle s'adapte aussi à inline-block.

Sinon une solution très simple est d'ajouter un :after, c'est parfait pour 1, 2, ou 3 colonnes (pour 4 et plus ça devient tordu):

https://codepen.io/anon/pen/wRYBMe

Bonjour,

Je ne suis pas contre les media queries a priori, mais il faut bien reconnaitre que c'est parfois des grosses prises de tête. C'est complètement dépendant de ce qu'il y a autour des boites. Selon moi, c'est une rustine qu'on ne doit sortir que quand on a rien de mieux.

Pour une solution avec les grid-layouts, c'est possible qu'il y ait quelque chose : je n'ai pas approfondi cette solution.

Je sens que je vais devoir m'y remettre. Ça me fera un bon exercice.

Amicalement,