26664 sujets

CSS et mise en forme, CSS3

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 :

upload/1547130897-59717-apercu.png

Résultat souhaité :

upload/1547130927-59717-apercu1.png

CodePen

Auriez-vous une piste à me donner ?

Merci Smiley smile
Hello,
Tu peux simplement appliquer un
margin-right: auto;
sur ton dernier élément Smiley smile
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 Smiley smile

@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 ! Smiley cligne

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 Smiley smile 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 Smiley smile
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 Smiley smile
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)
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,
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,