I use the pseudo element:afterto align the last row of the block list on the left. I usespace-evenlyto justify the blocks. My problem is that the block on the last line is not aligned with the user because:aftertakes up space. How can I solve this problem?
.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; }
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
The
:after pseudo-element takes up space in the Flex container and interferes with the alignment of the items in the last row, which is the root cause of your problem. Using margins on the :after pseudo-element as an alternative to flex auto is one way to solve this problem. This is the latest version of 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; }.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); }