2
votes

Comment adapter parfaitement le contenu sous la propriété flex?

J'ai 2 conteneurs qui s'appellent .grid.left et .grid.right . Chaque .grids , en particulier .grid.left a des images de manière dynamique et ces .grids sont enveloppés par un autre div appelé .gallery .

Le problème est que lorsque je donne de la marge à chacune des boîtes d'image, le navigateur fait un petit trou à l'intérieur de la .gallery comme ceci:

entrez la description de l'image ici

Je m'attends à éliminer ces lacunes de ma .gallery et à faire en sorte que les images s'adaptent complètement, peu importe combien je définissez les marges sur les images.

J'avais l'intention de donner les marges pour que la galerie soit plus belle. Je veux conserver ces marges et développer l'image de .grid.right uniquement pour qu'elle tienne entre l'image et le div .outer .

Sont existe-t-il des moyens appropriés pour résoudre ce problème?

CodePen p >

Extraits:

<div class="gallery">
  <div class="article">
    <div class="grid left">
      <a class="inset-contents top img"></a>
      <div class="inset-contents bottom">
        <a class="inner-contents first img"></a>
        <a class="inner-contents second img"></a>
      </div>
    </div>
    <a class="grid right img"></a>
  </div>
</div>

* {
  margin: 0;
  padding: 0;
}

div,
section {
  position: relative;
}

.gallery {
  width: 1200px;
  height: 100%;
  border: 1px solid black;
  box-sizing: border-box;
}

.article {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row;
  align-items: center;
}

.grid {
  height: 100%;
}

.left {
  width: 60%;
}

.inset-contents {
  width: 100%;
  height: 50%;
}

.top {
  margin-bottom: 1rem;
  background-image: url('https://imgur.com/3ozQvk9.jpg');
  padding-bottom: 50%;
}

.bottom {
  display: flex;
  flex-flow: row;
}

.inner-contents {
  width: 50%;
}

.first {
  background-image: url('https://imgur.com/tOMRVDi.jpg');
  padding-bottom: 50%;
  margin-right: .5rem;
}

.second {
  background-image: url('https://imgur.com/4oewNdx.jpg');
  padding-bottom: 50%;
  margin-left: .5rem;
}

.right {
  width: 40%;
  background-image: url('https://imgur.com/7gB1jHR.jpg');
  padding-bottom: 60%;
  align-content: stretch;
  margin-left: 1rem;
}

.img {
  display: block;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

html css flexbox gallery

2 commentaires

Je pense que la raison pour laquelle vous obtenez un écart dans votre .gallery est que vous donnez à chaque enfant de votre .gallery une marge

@indefinite J'avais l'intention de donner des marges pour mieux paraître. Je veux rester ceux-ci et développer l'image .grid.right uniquement pour l'adapter à la galerie

3 Réponses :

0
votes

bonjour Si j'ai raison, vous voulez juste vous débarrasser de l'écart et vous voulez agrandir les images. Vous pouvez vérifier celui-ci.

        <div class="gallery">
          <div class="article">
            <div class="grid left">
              <a class="inset-contents top img"></a>
              <div class="inset-contents bottom">
                <a class="inner-contents first img"></a>
                <a class="inner-contents second img"></a>
              </div>
            </div>
            <a class="grid right img"></a>
          </div>
        </div>

          * {
            margin: 0 auto;
            padding: 0 auto;
          }
          div, section {
            position: relative;
          }
          .gallery {
            width: 1200px;
            height: 100%;
            border: 1px solid black;
            box-sizing: border-box;
          }
          .article {
            width: 100%;
            height: 100%;
            display: flex;
            flex-flow: row;
            align-items: center;
          }
          .grid {
            height: 100%;
          }
          .left {
            width: 60%;
          }
          .inset-contents {
            width: 100%;
            height: 50%;
          }
          .top {
        
            background-image: url('https://imgur.com/3ozQvk9.jpg');
            padding-bottom: 50%;
          }
          .bottom {
            display: flex;
            flex-flow: row;
          }
          .inner-contents {
            width: 50%;
          }
          .first {
            background-image: url('https://imgur.com/tOMRVDi.jpg');
            padding-bottom: 50%;
          
          }
          .second {
            background-image: url('https://imgur.com/4oewNdx.jpg');
            padding-bottom: 50%;
      
          }
          .right {
            width: 40%;
            background-image: url('https://imgur.com/7gB1jHR.jpg');
            padding-bottom: 60%;
            align-content: stretch;

          }
          .img {
            display: block;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
          }

Il vous suffit de supprimer toutes les marges que vous avez placées dans l'enfant .gallery .

1 commentaires

J'ai besoin du reste des marges pour que les images soient plus belles. Ce que je voulais, c'était agrandir l'image de .grid.right verticalement.

1
votes

Le problème est de savoir comment vous gérez la hauteur de l'élément right dans votre galerie d'images:

omettre le réglage height: 100% (en raison de la classe grid ) et de la padding-bottom - vous pouvez remplacer cela en ajouter height: auto à l'élément right ,
supprimez align-items: center de l'élément article et autorisez le align-items: stretch par défaut à prendre le relais - cela va s'étirer et faire correspondre la hauteur de l'élément right à la left.

Voir la démo ci-dessous:

<div class="gallery">
  <div class="article">
    <div class="grid left">
      <a class="inset-contents top img"></a>
      <div class="inset-contents bottom">
        <a class="inner-contents first img"></a>
        <a class="inner-contents second img"></a>
      </div>
    </div>
    <a class="grid right img"></a>
  </div>
</div>

* {
  margin: 0;
  padding: 0;
}

div,
section {
  position: relative;
}

.gallery {
  width: 1200px;
  height: 100%;
  border: 1px solid black;
  box-sizing: border-box;
}

.article {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row;
  /*align-items: center;*/
}

.grid {
  height: 100%;
}

.left {
  width: 60%;
}

.inset-contents {
  width: 100%;
  height: 50%;
}

.top {
  margin-bottom: 1rem;
  background-image: url('https://imgur.com/3ozQvk9.jpg');
  padding-bottom: 50%;
}

.bottom {
  display: flex;
  flex-flow: row;
}

.inner-contents {
  width: 50%;
}

.first {
  background-image: url('https://imgur.com/tOMRVDi.jpg');
  padding-bottom: 50%;
  margin-right: .5rem;
}

.second {
  background-image: url('https://imgur.com/4oewNdx.jpg');
  padding-bottom: 50%;
  margin-left: .5rem;
}

.right {
  width: 40%;
  background-image: url('https://imgur.com/7gB1jHR.jpg');
  /*padding-bottom: 60%;
  align-content: stretch; */
  margin-left: 1rem;
  height: auto; /* added */
}

.img {
  display: block;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

1 commentaires

J'ai déjà trouvé une autre solution, mais je pense que votre chemin est meilleur que le mien. Merci d'avoir répondu.

1
votes

J'ai trouvé la solution. Selon cet article , j'avais besoin d'ajouter flex-shrink: 0; code> dans .right comme ceci:

 

    <div class="gallery">
      <div class="article">
        <div class="grid left">
          <a class="inset-contents top img"></a>
          <div class="inset-contents bottom">
            <a class="inner-contents first img"></a>
            <a class="inner-contents second img"></a>
          </div>
        </div>
        <a class="grid right img"></a>
      </div>
    </div>
  * {
    margin: 0;
    padding: 0;
  }
  div, section {
    position: relative;
  }
  .gallery {
    width: 1200px;
    height: 100%;
    border: 1px solid black;
    box-sizing: border-box;
  }
  .article {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .grid {
    height: 100%;
  }
  .left {
    width: 60%;
  }
  .inset-contents {
    width: 100%;
    height: 50%;
  }
  .top {
    margin-bottom: 1rem;
    background-image: url('https://imgur.com/3ozQvk9.jpg');
    padding-bottom: 50%;
  }
  .bottom {
    display: flex;
    flex-flow: row;
  }
  .inner-contents {
    width: 50%;
  }
  .first {
    background-image: url('https://imgur.com/tOMRVDi.jpg');
    padding-bottom: 50%;
    margin-right: .5rem;
  }
  .second {
    background-image: url('https://imgur.com/4oewNdx.jpg');
    padding-bottom: 50%;
    margin-left: .5rem;
  }
  .right {
    width: 40%;
    background-image: url('https://imgur.com/7gB1jHR.jpg');
    padding-bottom: 60%;
    align-content: stretch;
    margin-left: 1rem;
    flex-shrink: 0;
  }
  .img {
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

0 commentaires