Note: this is actually very easy to do with with FlexGrid (grid-template-columns: repeat(auto-fill, 200px)), but mainly for compatibility reasons I wanted to do this with FlexBox.

The problem arises if you are using flexbox, with justify-content: space-between, to create a three column layout. If you have two items on last row, then the very last element with be "aligned" to the right.

My solution was using the mod queries to select the last element when there are 3n+2 elements in total:

  li {
  flex: 0 0 333px;
  &:nth-last-child(3n+2):first-child ~ li:last-child {
    margin-right: 363px;
    background-color: blue;
  }
}