5099 sujets

Le Bar du forum

Je viens de tomber sur un truc que j'aimerais vous faire partager au cas où... vous la connaissiez cette technique de centrage grid en raccourci ? :
.parent {
  display: grid;
}
.children {
  place-self: center;
}


CodePen

Je viens d'en apprendre une bonne...
Administrateur
Oui, et ça fonctionne aussi dans Flexbox (enfin, sur le principe).
Modifié par Raphael (28 Feb 2022 - 08:31)
Administrateur
Olivier C a écrit :
"Sur le principe" ? Ce dernier point est intéressant. Le comportement sous flexbox serait-il bugué ?

Disons que c'est plus compliqué que ça :

1) place-content est un raccourci de justify-content + align-content.
Dans Grid Layout, ça va centrer l'ensemble de la grille horizontalement et verticalement. Mission accomplie.
Dans Flexbox, ça va centrer l'ensemble des éléments horizontalement (justify-content), par contre align-content n'aura d'effet que s'il y a plusieurs rangées (flex-wrap) donc ne fonctionnera pas dans la plupart des cas classiques.

2) place-items est un raccourci de justify-items + align-items.
Dans Grid Layout, ça va centrer l'ensemble des éléments dans leur cellule horizontalement et verticalement. Mission accomplie.
Dans Flexbox, ça ne va centrer l'ensemble des éléments que verticalement (align-items), parce que... justify-items n'existe pas dans flexbox.

3) place-self est un raccourci de justify-self + align-self.
Dans Grid Layout, ça va centrer un élément individuel horizontalement et verticalement. Mission accomplie.
Dans Flexbox, ça ne va centrer l'élément que verticalement (align-self), parce que... justify-self n'existe pas dans flexbox.

Plus d'info : https://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties
Modifié par Raphael (02 Mar 2022 - 07:43)
Meilleure solution
Merci pour cette réponse très complète. Je te reconnais bien là, c'est tout à fait un sujet dans tes cordes. C'est bien pour cela que je t'avais relancé d'ailleurs.

Bien cordialement.