... and it relies on DOM structure.

This is horrible, IMHO. Flex containers will layout the flex items, which are by definition its direct descendants. If by some reason [1] you get an extra DOM element between the flex container and the item you intend to layout, then you're in for a rewrite of the CSS and maybe some extra classes.

Also, this bug in Webkit is rather inconvenient: https://github.com/philipwalton/flexbugs/issues/115

[1] For instance, if you create an Angular element directive.