I'm trying to align a top menu which consists of 3 blocks of content.

What I'm trying to achieve is this:

• block 1: left aligned
• block 2: centered horizontally
• block 3: right aligned

If all 3 blocks were the same size, I could use flexbox (as in the snippet), but they're not, so it doesn't produce the output I require.

Instead, flexbox puts equal space between the 3 blocks - resulting in the middle block being aligned off-center.

I was wondering if this could be achieved with flexbox, or if not, another solution. This needs to work robustly in production so a 'Grid' solution is not applicable as there is insufficient support.

.container {
  margin: 20px 0;
}

.row {
  background-color: lime;
  display: flex;
  justify-content: space-between;
}

.item {
  background-color: blue;
  color: #fff;
  padding: 16px;
}

  

    
left, slightly longer
    
center, this item is much longer
    
right