Jack1991 Jack1991 - 2 years ago 86
HTML Question

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

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


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
rule? at the moment they only line up when there is three in both rows.

Here's the code and a fiddle:



<div class="box">




.box {

ul {
flex-wrap: wrap;
padding: 30px 20px 30px 20px;
list-style: none;

li {

Answer Source

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:


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:


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 :-)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download