With flex: Works for three elements ✅
Left
Demo 1
This demo has no collision detection applied.
By using flex: 1; we can make the siblings the same width. This causes the center element to be sandwiched exactly in the middle.
Downside: The siblings take up the remaining space and are of the same width. The right element can't grow on smaller screens. With CTT, this would not be a problem.
Second downside: It does not work with containers that are not in the center.
With flex: Does not work for two elements ❌
Demo 1
This demo has no collision detection applied.
Yes, we could add an empty dummy element again on the left side. But this would prevent the right sibling to grow.
With flex: Does not work for non-centered wrapper ❌
Left
Demo 1
This demo has no collision detection applied.
With grid: Works for three elements ✅
Left
Demo 1
This demo has no collision detection applied.
We use grid-template-columns: 1fr auto 1fr; to make the siblings the same width and also sandwich the center element in the middle.
Downside: The siblings take up the remaining space and are of the same width. The right element can't grow on smaller screens. With CTT, this would not be a problem.
Second downside: It does not work with containers that are not in the center.
With grid: Does not work for two elements ❌
Demo 1
This demo has no collision detection applied.
With grid: Does not work for non-centered container ❌
Left
Demo 1
This demo has no collision detection applied.
With CTT: Works for three elements ✅
Left
Demo 1
This demo has no collision detection applied.
With CTT: Works for two elements ✅
Demo 1
This demo has no collision detection applied.
With CTT: Works for four elements ✅
Left 1
Left 2
Demo 1
This demo has no collision detection applied.
With CTT: Works also for non-centered containers ✅
Left 1
Left 2
Demo 1
This demo has no collision detection applied.