Flex item should align left, not center, when it wraps

by

Solution

Instead of justify-content: space-around use justify-content: space-between.

Explanation

Take a look at the flexbox spec:

8.2. Axis Alignment: the justify-content property

The justify-content property aligns flex items along the main axis
of the current line of the flex container.

There are five values that apply to justify-content. Here are two of them:

space-around

Flex items are evenly distributed in the line, with half-size spaces
on either end.

If the leftover free-space is negative or there is
only a single flex item on the line, this value is identical to
center.

Emphasis mine. That’s the problem you’re having.

Now check out space-between:

space-between

Flex items are evenly distributed in the line.

If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to flex-start.

So, to left-align your flex item on wrap, use space-between.

Then, if necessary, you can add some left and right padding to the container to simulate space-around.

Of course, the next problem you’ll face is when two items wrap, and each item aligns at opposite ends. But that’s another question altogether 🙂

More Related Contents:

  1. Flexbox: center horizontally and vertically
  2. CSS-only masonry layout
  3. Make container shrink-to-fit child elements as they wrap
  4. When flexbox items wrap in column mode, container does not grow its width
  5. One flex/grid item sets the size limit for siblings
  6. Why are flex items not wrapping?
  7. Equal height columns with CSS
  8. Make grid container fill columns not rows
  9. Centered elements inside a flex container are growing and overflowing beyond top [duplicate]
  10. Align an element to bottom with flexbox
  11. Make background color extend into overflow area
  12. Center text over an image in flexbox
  13. Force flex item to span full row width
  14. Why can’t be flex containers?
  15. Prevent flex items from rendering side to side
  16. Flexbox and Internet Explorer 11 (display:flex in ?)
  17. What’s the difference between flex-start and baseline?
  18. ‘position: sticky’ not working when ‘height’ is defined
  19. Flexbox column-reverse in Firefox, Edge and IE
  20. Text not centered with justify-content: center
  21. How to stretch flex child to fill height of the container?
  22. Flexbox resize and scrollable overflow [duplicate]
  23. How can I show three columns per row?
  24. CSS object-fit: contain; is keeping original image width in layout
  25. How to center horizontally and vertically?
  26. Flexbox on IE11: image stretched for no reason?
  27. extra space when centering elements using flexbox
  28. Height is not correct in flexbox items in Chrome [duplicate]
  29. Make flex container take width of content, not width 100%
  30. justify-content: space-between failing to align elements as expected

Leave a Comment