Puis-je modifier la valeur de justification du contenu en fonction du nombre d’éléments contenus dans le conteneur Flex?

Je travaille sur une galerie d’images sur un site hérité. Je ne peux utiliser que du vieux HTML / jQuery ou JS / CSS classique. Je sais que ce serait beaucoup plus facile avec Bootstrap ou une bibliothèque de grid.

Je le construis avec flexbox. Il y a quatre images dans chaque rangée, avec plusieurs rangées. Cela a l’air génial quand chaque rangée a ses quatre images. Quand il y en a 2 ou 3, parce que j’utilise un justify-content: space-between , cela semble bizarre à cause du grand écart entre les images.

La raison pour laquelle j’utilise space-between est que je veux que les images s’alignent à gauche du conteneur parent, ainsi qu’à droite.

Quelques notes :

  • Chaque article flexible a une largeur maximale de 150px
  • Je veux une marge entre les éléments, mais je ne me soucie pas de savoir si cette marge change lorsque la largeur de la fenêtre change
  • le conteneur flexible a une largeur maximale qui ne permet que quatre éléments de 150 pixels de large dans une rangée

Ma question est la suivante: si une ligne contient moins d’un ensemble d’éléments (dans ce cas, quatre), puis-je modifier le justify-content la justify-content pour qu’il soit plus approprié, comme flex-start ?

Idéalement, je veux le faire sans JavaScript / jQuery, mais si c’est impossible, je suis également ouvert à ces solutions.

De plus, n’hésitez pas à me faire savoir si j’y réfléchis trop et que je n’ai même pas besoin d’utiliser le justify-content: space-between . Voici un exemple de travail:

 /* outer container */ .flex-container { padding: 24px 0; background: white; border: solid 1px rgba(0,0,0,.1); max-width: 700px; /* or whatever */ /* flex props */ display: flex; flex-wrap: wrap; justify-content: space-between; } /* contains img block and title */ .thumb-grid { border: solid 1px rgba(0,0,0,.1); width: 150px; margin-bottom: 36px; } .thumb-grid:first-of-type { margin-left: 0; } .thumb-grid:nth-of-type(4) { margin-right: 0; } .thumb-grid p { text-align: center; } .img-block { background: black; height: 150px; } .img-block img { height: 150px; opacity: 1; transition: opacity 150ms; } .img-block:hover img { opacity: .9; } 
 
example image

Image 1

example image

Image 2

example image

Image 3

example image

Image 4

example image

Image 5

example image

Image 6

example image

Image 7

En fonction de ce que vous devez prendre en charge, il peut être plus logique d’utiliser des dispositions de grid CSS (comme l’a souligné TylerH, les grids CSS ne prennent pas en charge les navigateurs universels). Consultez la documentation pour plus d’informations: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

 .flex-container { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; grid-auto-rows: minmax(100px, auto); } 
 
example image

Image 1

example image

Image 2

example image

Image 3

example image

Image 4

example image

Image 5

example image

Image 6

example image

Image 7

Pourquoi ne pas utiliser une margin au lieu de justify-content:space-between pour obtenir l’espacement?

 /* outer container */ .flex-container { padding: 24px 0; background: white; border: solid 1px rgba(0,0,0,.1); max-width: 700px; /* or whatever */ /* flex props */ display: flex; flex-wrap: wrap; justify-content:center; } /* contains img block and title */ .thumb-grid { border: solid 1px rgba(0,0,0,.1); width: 150px; margin: 0 12px 36px; } .thumb-grid:first-of-type { margin-left: 0; } .thumb-grid:nth-of-type(4) { margin-right: 0; } .thumb-grid p { text-align: center; } .img-block { background: black; height: 150px; } .img-block img { height: 150px; opacity: 1; transition: opacity 150ms; } .img-block:hover img { opacity: .9; } 
 
example image

Image 1

example image

Image 2

example image

Image 3

example image

Image 4

example image

Image 5

example image

Image 6

example image

Image 7

Pour cette mise en page, utilisez la grid CSS. Votre problème initial n’existera même pas alors. Vous n’aurez besoin d’aucune solution de contournement, ni de piratage informatique, de JavaScript ou de tout autre élément étrange pour le faire fonctionner. Avec la disposition en grid CSS, vous obtiendrez facilement ce dont vous avez besoin avec un code élégant et maintenable.

La disposition de grid CSS est une sorte de nouvelle fonctionnalité CSS, et il s’agit en fait de la première manière légitime de faire la disposition, ce qui est génial. Lisez à ce sujet:

Dans votre cas, examinez en particulier les propriétés de auto-fill et d’ auto-fit . Voici un autre lien utile: https://gridbyexample.com/examples/example37/ .

Et voici un exemple rapide de ce que vous souhaitez réaliser à l’aide de la grid CSS: https://codepen.io/anon/pen/YxbexQ?editors=1100 . Voyez comment il réagit à différentes largeurs d’écran / conteneur Ça fonctionne.

Voici une solution que vous pouvez utiliser avec Flexbox, qui fournira une solution multi-navigateur plus large que celle offerte par CSS Grid (aujourd’hui).

L’astuce principale consiste à avoir des éléments fantômes , 1 de moins que le nombre d’éléments par ligne.

Ils occupent le même espace horizontal qu’un article ordinaire, mais n’ont pas de hauteur et, de ce fait, poussent tout nombre inférieur à 4 à gauche.

Comme nous pouvons utiliser les pseudo-éléments, dans ce cas, nous n’avons besoin que d’un élément supplémentaire jouant le rôle de fantôme.

Extrait de stack

 /* outer container */ .flex-container { padding: 24px 0; background: white; border: solid 1px rgba(0,0,0,.1); max-width: 700px; /* or whatever */ /* flex props */ display: flex; flex-wrap: wrap; justify-content: space-between; } /* contains img block and title */ .thumb-grid { border: solid 1px rgba(0,0,0,.1); width: 150px; margin-bottom: 36px; } .thumb-grid:empty, /* the ghost elements */ .flex-container::before, .flex-container::after { content: ''; border: solid 1px rgba(0,0,0,0); width: 150px; margin-bottom: 36px; order: 1; } .thumb-grid:first-of-type { margin-left: 0; } .thumb-grid:nth-of-type(4) { margin-right: 0; } .thumb-grid p { text-align: center; } .img-block { background: black; height: 150px; } .img-block img { height: 150px; opacity: 1; transition: opacity 150ms; } .img-block:hover img { opacity: .9; } 
 
example image

Image 1

example image

Image 2

example image

Image 3

example image

Image 4

example image

Image 5

example image

Image 6

example image

Image 7