[qazxcvbnm]

Either put left, right as absolute (like the following) and leave middle in the flex, or do the opposite. One may decide which option to use based on whether the centre or the left/right is more semantically important in the layout.

We did have to use some CSS "tricks" (transform for absolute centring), but once you've learnt those then CSS is indeed quite sane.

  outer {
          flex-direction: row;
          justify-content: center;
          align-items: center; }
  left, right {
          position: absolute;
          top: 50%;
          transform: translateY(-50%); }
  left {
          left: 0; }
  right {
          right: 0; }

(This kind of layout, which is common in eg top nav bars, is slightly deceptive. robin_reala's solution does not conform to requirements that left and right can be different widths, which would cause middle to be not centred under simple justify-content: space-between.)

[meindnoch]

Yes, this is the correct solution.

Which underlines the original point, that CSS is a hodgepodge of different ideas with no overarching system behind them. A simple task like this needed 3 different positioning systems:

1. flexbox for positioning the middle item

2. absolute positioning for left/right

3. and the translateY(-50%) trick for vertically positioning the absolute positioned items

[qazxcvbnm]

Touché. Indeed, CSS forces one to recognise layouts that may not conform to a layout 'flow' in boxes.

In its defence, I suppose recognising this is important, as to make potential box overlaps explicit (which is typically unwanted).

CSS also handles a whole lot of things other than layout, which I'm not well informed of layout constraint systems being able to handle. Being a hodgepodge is an advantage, comparable to how its a great advantage that one can invoke any hodgepodge systems task from bash, as one single tool.