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;
justify-content:space-around;
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
.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;
}
Take a look at the flexbox spec:
8.2. Axis Alignment: the
justify-content
propertyThe
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 :-)