Here's a great explanation from Jen Simmons that really helped me understand the differences and respective strengths and weaknesses of each:
I don't think the example she uses is a good one. That thing is obviously achievable using absolute positioning, which in this case is arguably easier and will give you much better browser support.
Also, the other examples she uses are really weird. Boxes of varying widths and heights. This is just not a thing in current websites.
The flexbox example where she ends up with 3 items on the first row and 4 on the second is just fantasy according to my experience. That would only work for a manually crafted page, whereas most websites with that much content items are auto-generated from some backend (even if it is markdown files in a static website generator). Otherwise please show me how can I achieve that effect with similarly sized items and how do I make it responsive.
Responsiveness with Flexbox or CSS Grid is best achieved through media queries. You could make a really simple Flexbox or CSS Grid site with no media queries and have it be responsive, but if you want complicated layouts you'd make use of media queries. e.g. named grid-template-areas and media queries play really nice together.