Margins of flex child elements won't collapse automatically like regular elements. It can be solved but it would be unnecessarily complex for the simplicity of the layout.

Because it's a just a simple stack. The intent is concistent margins between siblings within the wrapper. What came to mind were paragraphs. Or perhaps images. Or both?

If other browsers besides Firefox add support for the gap property, Flexbox will be perfect for this. The owl approach has some subtle issues, like not taking into account elements which show/hide based on breakpoint.

Pardon my naivete, but wouldn't stack be just a list of divs?

Display: block fits better because it has been around for more than 15 years unlike flexbox. And flexbox has no advantages in this case.

Flex is great for one directional layout within a box. It is not great for two dimensions which most layout is concerned with.

The stack is not two dimensional.

Has nothing to do with what we're talking about.