How to justify a single flexbox item (override justify-content)

Question

You can override align-items with align-self for a flex item. I am looking for a way to override justify-content for a flex item.

Answer 1

If you aren't actually restricted to keeping all of these elements as sibling nodes you can wrap the ones that go together in another default flex box, and have the container of both use space-between.

.space-between {
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
}
.default-flex {
  border: 1px solid blue;
  display: flex;
}
.child {
  width: 100px;
  height: 100px;
  border: 1px solid;
}

  
1
  

    
2
    
3
    
4
    
5
  

Or if you were doing the same thing with flex-start and flex-end reversed you just swap the order of the default-flex container and lone child.