web-dev-qa-db-fra.com

Flexbox: Comment justifier le contenu avec un espace entre ET que tout soit centré?

Je rencontre un problème avec flexbox.

J'ai un div qui a une largeur maximale de 920 px. Je veux que les boîtes de contenu remplissent le div de gauche à droite jusqu'à la largeur maximale possible, tout ayant des marges égales. Lorsque la taille de l'écran descend à une case par ligne, je veux que cette case soit centrée sur l'écran.

Voici le site en action: http://javinladish.com/code/index.html

Si j'utilise:

justify-content: center;

Ensuite, les cases ne remplissent pas la largeur maximale.

Si j'utilise:

justify-content: space-between;

Ensuite, les cases ne restent pas centrées lorsque je descends à une case par ligne.

Comment puis-je parvenir à un équilibre heureux entre les deux? C'est-à-dire en remplissant la largeur maximale du conteneur et en gardant tout le contenu centré?

Merci d'avance pour votre aide.

htmlcssflexbox
27
javinladish

La meilleure solution serait d'utiliser margin: auto; sur les marges horizontales des éléments flexibles comme suit:

    .flexbox {
       background-color: pink;
       display: flex;
       justify-content:  space-between;
       flex-wrap: wrap;
    }
    .flex-item {
       width: 175px;
       height: 175px;
       background-color: grey;
       margin: 10px auto;
    }
    <div class="flexbox">
       <div class="flex-item"></div>
       <div class="flex-item"></div>
       <div class="flex-item"></div>
       <div class="flex-item"></div>
       <div class="flex-item"></div>
       <div class="flex-item"></div>
       <div class="flex-item"></div>
    </div>

Le seul problème peut être que si la dernière ligne contient plus d'un élément mais pas assez pour remplir la ligne entière, il y aura beaucoup d'espace entre les derniers éléments de la ligne.

12
martin schwartz

justify-content: space-between; repoussera toujours les éléments jusqu'aux bords du conteneur par ligne. Aucun élément d'une autre ligne ne serait jamais centré.

J'ai réussi avec des marges négatives, mais cela impliquerait que vous définissiez explicitement ces marges:

JS Fiddle

HTML

<div class="grid">
  <div class="grid__elem">
    TEST 1
  </div>
  <div class="grid__elem">
    TEST 2
  </div>
  <div class="grid__elem">
    TEST 3
  </div>
  <div class="grid__elem">
    TEST 4
  </div>
  <div class="grid__elem">
    TEST 5
  </div>
  <div class="grid__elem">
    TEST 6
  </div>
  <div class="grid__elem">
    TEST 7
  </div>
</div>

SCSS

.grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-left: -2%;
  &__elem {
    width: 18%;
    background: red;
    color: white;
    margin: 0 0 2% 2%;
  }
}

Il existe également une option pour cibler des éléments spécifiques via align-self, mais j'ai trouvé cela inutile dans des exemples de travail. Voir ce lien .

1
chocolata

Sur la div parent où vous avez justify: space-beween; Vous souhaitez également inclure: align-items: center;

Vous pouvez donc l'écrire comme ceci:

.navbar-wrapper {
    display: flex;
    flex-direction: row;
    justify: space-between;
    align-items: center;
}
1
Noah

Il semble que vous recherchiez deux comportements à la fois. J'ai eu du succès avec justify-content: center et flex-wrap: wrap sur le récipient et en définissant une marge gauche et droite appropriée sur les enfants. Ensuite, appliquez ce même montant comme une marge négative sur le récipient, et les bords des enfants seront alignés avec le récipient.

.parent {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 -3rem;
}

.child {
    align-self: center;
    margin: 0 3rem 6rem 3rem;
}
0
Isaac F