The flex element should align to the left, not in the center when it wraps.

Question

I have an unordered list of flex-based social networking icons on the bottom of the mobile menu on my website.

I am trying to make the rows of three sit side by side, at an equal distance from each other. I dealt with this rule

justify-content:space-around

but my problem is that when there are more than three elements, the next line starts filling out from the center, while I would like it to fill on the left , as the user adds more icons over time.

The further I explain this, the more I’m sure how possible it is, but I thought I would throw it away just in case.

Is it possible for the list items in the next line to start to the left of the container without breaking the rule justify-content:space-around?

Currently they line up only when there are three in both lines.

Here is the code

.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;
}

<div class="box">

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>

</div>

Run code

Answer 1

Decision

justify-content: space-aroundUse instead justify-content: space-between.

---

Description

Take a look at the flexbox specification:

8.2. Axis Alignment: Propertyjustify-content

The property justify-contentaligns flex items along the main axis of the current row of the flex container.

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

space-around

Flex items are evenly distributed in a row with half-sized spaces at both ends.

, center.

. , .

space-between:

space-between

Flex .

, flex-start.

, , space-between.

, , space-around.

---

, , , - , . : -)

Answer 2

native flexbox... . , . .

, ( 2), ... . , .

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.box {
  width: 275px;
  height: 175px;
  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;
}
.hidden {
  opacity: 0;
  height: 0;
}

<div class="box">

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li class="hidden"></li>
    <li class="hidden"></li>
  </ul>

</div>

<div class="box">

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li class="hidden"></li>
    <li class="hidden"></li>
  </ul>

</div>

Answer 3

li.

Also do not forget that ul and li have default styles applied by the browser. Consider using css reset to ensure consistency across all browsers.