CSS Flexbox - How to align last row left or right while using justify-content: space-between

Question

I am using flex for aligning dynamic length of LIs. Everything is working fine but I am not sure how to align last row to left or right align while using flex's justify-content: space-between.

LIs length is dynamic and can be any of numbers e.g. 8, 9, 10... etc.

Answer 1

Simply put, you can't. That is what you're trying to do is not how the justify-content: space-between property works. It does exactly what you see it doing. Instead you could use justify-content: flex-start with nth item margining to achieve the layout you're looking for.

Don't forget to add box-sizing: border-box; to the li style, otherwise you'll have to remove 3 pixels from the left/right margin on the middle items to account for your borders.

This will repeat consistently no matter how many items you add for the layout you have of rows of 3. If you want rows of 4, 5, etc. you only need to modify the widths and where you apply the margins. You can play around with various nth-child numbers to achieve whatever result you want.

Try this:

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

li {
  width: calc(33.33% - 20px);
  border: 1px solid;
  min-height: 100px;
  margin-bottom: 30px;
  background: white;
  box-sizing: border-box;
}
li:nth-child(3n+2){
  margin: 0 30px 30px;
}