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

Question

I have a flex-based unordered list of social media icons at the bottom of a mobile menu on my website.

I\'m trying to get rows of three to sit side by side, equal di

Answer 1

Not possible with native flexbox...or any other layout methods for that matter. There are workarounds but without those..not really.

However, if the number of possible extra left-over items is known (in this case 2) you can add hidden items to even things out...see I said it was hacky.

* {
  -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;
}

  

    
1
    
2
    
3
    
4
    
5
    

    

  





  

    
1
    
2
    
3
    
4