web-dev-qa-db-fra.com

Ajout d'espace entre flexbox items

J'essaie de créer un div à défilement horizontal avec flexbox. Jusqu'à présent, j'en ai la plupart. Cependant, le seul problème auquel je suis confronté est que j'essaie d'ajouter de l'espace à mes articles, mais pour une raison quelconque, rien ne semble fonctionner. J'ai essayé d'ajouter de la marge, du remplissage, de justifier le contenu, etc. Voici un jsfiddle de ce que j'essaie de réaliser.

    .grid {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      margin-bottom: 20px;
      justify-content: space-between;
    }
    
    /*Each item is one column*/
    
    .item {
      width: 50%;
    }
    
    .article-scroll-mobile {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      flex-wrap: nowrap;
      text-align: center;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      /*For iOS smooth scroll effect*/
    }
 <div class="grid article-scroll-mobile">
      <div class="item">
        <img src="https://www.w3schools.com/howto/img_fjords.jpg">
      </div>
      <div class="item">
        <img src="https://www.w3schools.com/howto/img_fjords.jpg">
    
      </div>
      <div class="item">
        <img src="https://www.w3schools.com/howto/img_fjords.jpg">
    
      </div>
      <div class="item">
        <img src="https://www.w3schools.com/howto/img_fjords.jpg">
    
      </div>
      <div class="item">
        <img src="https://www.w3schools.com/howto/img_fjords.jpg">
    
      </div>
      <div class="item">
        <img src="https://www.w3schools.com/howto/img_fjords.jpg">
    
      </div>
    </div>
htmlcsscss3flexbox
6
user2896120

Il y a quelques points à considérer.

Tout d'abord; avec justify-content vous définissez comment l'espace restant est géré. En utilisant space-between vos éléments seront alignés de sorte que l'espace entre eux soit égal, en le définissant sur center l'espace restant sera autour de tous les éléments, avec tous les éléments collés ensemble.

Dans votre cas cependant, il n'y a pas d'espace restant, car vos objets étirent réellement la div. Cela ne vous aide donc pas.

Prochain; vous avez défini la largeur d'un élément sur 50%. Ce qui est bien, vos item représenteront 50% de la fenêtre d'affichage. En effet, votre grille représentera implicitement 100% de la fenêtre d'affichage. Mais comme votre image déborde de la boîte, vous pouvez définir des marges si vous le souhaitez, et ils sépareront les éléments, mais vous avez besoin de marges à gros cul pour les voir. Plus grand alors le débordement de votre image.

Donc, pour résoudre ce problème, vous rendez les images réactives en les rendant aussi larges que l'élément;

.item img { display: block; height: auto; width: 100%; }

Mais cela pose un autre problème; flexbox essaie de dimensionner ses éléments flexibles pour les ranger tous dans le conteneur flexible. Vous verrez donc qu'il redimensionne automatiquement vos éléments afin qu'ils tiennent tous. Pour résoudre ce problème, vous devez forcer explicitement la largeur de vos articles;

.item { flex: 0 0 50%; }

Ce qui est un raccourci pour;

.item { flex-grow: 0; flex-shrink: 0; flex-basis: 50%; }

Donc, fondamentalement, vous dites; rendre mon article à 50% de son conteneur, et n'utilisez pas votre algorithme génial pour essayer de le rendre plus grand ou plus petit.

Vous avez maintenant ce que vous voulez et vous pouvez utiliser margin-right: 20px par exemple pour créer un espace de 20 pixels entre vos articles.

Extrait complet;

.grid { display: flex; width: 100%; }

.item { flex: 0 0 50%; margin-right: 20px; }
.item img { display: block; height: auto; width: 100%; }

.article-scroll-mobile {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  flex-wrap: nowrap;
  text-align: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /*For iOS smooth scroll effect*/
}
<div class="grid article-scroll-mobile">
  <div class="item">
    <img src="https://www.w3schools.com/howto/img_fjords.jpg">
  </div>
  <div class="item">
    <img src="https://www.w3schools.com/howto/img_fjords.jpg">
  </div>
  <div class="item">
    <img src="https://www.w3schools.com/howto/img_fjords.jpg">
  </div>
  <div class="item">
    <img src="https://www.w3schools.com/howto/img_fjords.jpg">
  </div>
  <div class="item">
    <img src="https://www.w3schools.com/howto/img_fjords.jpg">
  </div>
  <div class="item">
    <img src="https://www.w3schools.com/howto/img_fjords.jpg">
  </div>
</div>
14
giorgio