Maison  >  Questions et réponses  >  le corps du texte

Comment laisser suffisamment d'espace pour aligner les éléments avec l'espace de manière uniforme et :après ?

J'ai utilisé des pseudo éléments :after 在左侧对齐块列表的最后一行。我使用space-evenly来证明这些块的合理性。我的问题是最后一行的块与用户不对齐,因为 :after pour prendre de la place. Comment puis-je résoudre ce problème?

.exposegrid {
  width: 500px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  &:after {
    content: "";
    flex: auto;
  }
}

.exposetab {
  width: 100px;
  height: 66px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
}
<div class="exposegrid">
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
</div>

P粉129168206P粉129168206424 Il y a quelques jours533

répondre à tous(2)je répondrai

  • P粉099000044

    P粉0990000442023-09-13 17:13:43

    Le pseudo-élément

    :after prend de la place dans le conteneur Flex et interfère avec l'alignement des éléments de la dernière ligne, ce qui est à l'origine de votre problème. Utiliser des marges sur le pseudo-élément :after comme alternative à flex auto est un moyen de résoudre ce problème. Voici la dernière version de CSS :

    .exposegrid {
      width: 500px;
      display: flex;
      flex-flow: line wrapping;
      justify-content: spatially even;
      &:after {
        content: "";
        flex: none; /* disable flex grow/shrink */
        width: calc((100% - (100px * 4)) / 4); /* calculate border width */
      }
    }
    
    .exposetab {
      width: 100px;
      height: 66px;
      background-color: rgba(255, 255, 255, 0.2);
      border: 1px solid rgba(0, 0, 0, 0.4);
      border-radius: 5px;
      box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
      margin-bottom: 10px;
    }
    
    /* Add margin to last item in each line */
    .exposegrid > *:nth-child(4n+4) {
      right margin: 0;
    }

    répondre
    0
  • P粉938936304

    P粉9389363042023-09-13 17:00:22

       .exposegrid {
          width: 500px;
          display: grid;
          grid-template-columns: repeat(auto-fill, 100px); /* this will create cells that will fill the space , if there is space of five, then each row will have five*/
          gap: 10px /*instedt of margin, use gap to space cells*/
        }
        .exposetab {
          width: 100px;
          height: 66px;
          background-color: rgba(255, 255, 255, 0.2);
          border: 1px solid rgba(0, 0, 0, 0.4);
          border-radius: 5px;
          box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
        }
    <div class="exposegrid">
        <div class="exposetab"></div>
        <div class="exposetab"></div>
        <div class="exposetab"></div>
        <div class="exposetab"></div>
        <div class="exposetab"></div>
        <div class="exposetab"></div>
        <div class="exposetab"></div>
        <div class="exposetab"></div>
        <div class="exposetab"></div>
        <div class="exposetab"></div>
        <div class="exposetab"></div>
        <div class="exposetab"></div>
        <div class="exposetab"></div>
        <div class="exposetab"></div>
      </div>

    répondre
    0
  • Annulerrépondre