28172 sujets

CSS et mise en forme, CSS3

Centrer item flexbox sur plusieurs lignes

Bonjour à tous,

Je me casse la tête sur un détail :

J'aimerai centrer des éléments sur ma page de la façon suivante :

https://codepen.io/Gorn/pen/KQJPWx (comme la partie verte mais avec la partie jaune)

J'ai tenté mais je n'ai rien trouvé et rien réussi a faire en expérimentant.
J'ai créé un codepen pour vous montrer la structure de mes blocs (que je ne peux changer à cause de contraire) : https://codepen.io/Gorn/pen/KQJPWx

Je voulais savoir si c'est possible d'après vous, et si quelqu'un a une piste.
Merci d'avance Smiley smile
Modifié par gorn (28 Feb 2018 - 18:13)
Bonjour,

Pour obtenir le résultat souhaité ajoutez deux règles à cette classe (j'ai testé sur votre pen ça fonctionne) :
.containerClass {
  flex-direction: column;
  justify-content: center;
}


Maintenant, pour obtenir deux items côte à côte comme dans l'exemple de la partie verte il faudra leur ajouter un élément parent commun (une div).
Olivier C a écrit :
Maintenant, pour obtenir deux items côte à côte comme dans l'exemple de la partie verte il faudra leur ajouter un élément parent commun (une div).


Merci Olivier. Aie c'est bien ce que je pensais, mais pour mon besoin c'est vraiment embêtant car l'ordre des blocs entre la version mobile et desktop est différente et évident l'un des blocs du dessus s'intercale entre ces deux blocs (côte a côte).
Bonjour,

Je sais pas trop si cela te sera utile, mais pour les flexbox, il existe une propriété css order qui permet de spécifier l'ordre visuel de chaque éléments flexibles dans leur conteneur flexbox.
C'est peut être une piste.
Oui, mais `order` ne fera pas que les éléments soient placés sur la même ligne. Seul la spécification Grid Layout permettrait cela sans problème, mais pour l'instant c'est encore peu compatible avec le parc actuel des navigateurs.
Bonjour.

Pas vraiment une solution, plutôt une piste... Peut-être les pseudo-éléments ::before et ::after pourraient faire quelque chose.

Mais bon, si ça devient trop compliqué...

Dommage que 'display: contents' ne fonctionne toujours que sur Firefox. La solution d'Olivier aurait marché.

Smiley smile
Modérateur
Salut,

je propose de laisser en ligne et de rajouter ça :

  .block1,
  .block2,
  .block3,
  .block4,
  .block5 {
    margin: 10px calc(50% - 51px); // il est important d'enlever la taille du bloc + celle de la marge qu'on rajoute en dessous
  }
  
  .block3 {
    margin-right : 1px; // 1px ou autre hein à reporter au dessus. Par contre, je pense qu'il ne faudra pas avoir une marge trop importante au risque de tout faire péter
  }
  .block4 {
    margin-left : 1px; // idem
  }


Sur le Codepen ça marche (bien que le calc me donne pas la valeur de j'attendais...). Duc oup je l'ai refait sur un fiddle et ca marche mieux (au niveau du résultat du calc) https://jsfiddle.net/n4mh1ccy/1/

En gros il s'agit de mettre une marge assez grosse (et relative à la taille du parent pour un peu de flexibilité) pour qu'il n'y ait de place que pour un bloc par ligne.

Pour les blocs 3 et 4 il suffit de réduire leurs marges communes.
Modifié par _laurent (02 Mar 2018 - 10:58)
Sujet clos
Aller à