Maison > Questions et réponses > le corps du texte
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粉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; }
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>