Detailed explanation of two methods to solve a bug in the justify-content: space-between alignment of flex layout

When setting display:flex, justify-content: space-betweend, it will align the child elements to the sides and evenly divide the remaining space.

For example: if you want to put three child elements in one row

Effect:

This seems to be fine and looks good, but if there are not three characters in the next row, there will be problems if there are only two.

This looks particularly disgusting, with a large empty space in the middle. It looks particularly like a bug, rather than the desired effect of aligning one by one with the previous line.

Now to solve this problem, here are two methods:

• Pseudo-class: after
• Provide a placeholder element

Pseudo-class solution

Placeholder element solution

Effect

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.