The flex layout achieves alignment on both sides of one line, and left alignment on less than one line

Not much to say, the code:

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.container:after {
  content: "";
  flex: auto;
}

In the code above, .containerit is the container element that contains the flex items. By justify-contentsetting the property to space-between, the items are justified on a single line. Enable items to wrap by setting the property flex-wrapto .wrap

Then, :aftercreate a flex-item at the end of the container using a pseudo-element and set it to flex: auto. In this way, when the item is less than one line, the flex item will occupy the remaining space, thereby aligning the item to the left.