In a flex container with justify-content: space-around, how to left-align the first flex item to wrap?

Question

I have a flex-based unordered list of social media icons at the bottom of a mobile menu on my Wordpress website. I'm trying to get rows of three to sit side by side, equal distance apart. I've managed this with the rule

justify-content:space-around;

but my problem is that when there is more than three items, the next row starts filling up from the centre, whereas I'd like it to fill up from the left as the user adds more icons over time.

The further I get with explaining this the more unsure I am as to whether this is even possible, but I thought I'd throw it out there just in case – is it possible to make the list items in the next row start from the left of the container without messing up the

justify-content:space-around;

rule? at the moment they only line up when there is three in both rows.

Here's the code and a fiddle:

https://jsfiddle.net/rjyh2ys3/1/

HTML

<div class="box">



    <ul>

      <li>1</li>

      <li>2</li>

      <li>3</li>

      <li>4</li>

    </ul>



</div>

CSS

.box {

  width:275px;

  height:275px;

  background-color:yellow;

}



ul { 

  width:auto;

  display:flex;

  flex-direction:row;

  justify-content:space-around;

  flex-wrap: wrap;

  padding: 30px 20px 30px 20px;

  list-style: none; 

}



li {

  width:30px;

  height:30px;

  margin:15px;

  background-color:red;

}

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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 the justify-content property. 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, use space-between and, if necessary, 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 :-)

In a flex container with justify-content: space-around, how to left-align the first flex item to wrap?

Sign up