Ask five developers when to use flexbox versus grid and you'll get five different rules of thumb, most of them half-right. The real answer comes down to a single structural difference: flexbox lays things out in one dimension at a time, and grid lays them out in two dimensions at once. Everything else follows from that.
One dimension vs. two
Flexbox arranges items along a single axis -- a row or a column -- and it's genuinely one-directional. You can wrap items onto multiple lines, but flexbox doesn't know or care how items in one row line up with items in the row below. Each row (or column) does its own thing.
Grid defines rows and columns together as a single structure. An item can span multiple rows and columns, and everything lines up against the same grid lines whether you're looking across a row or down a column. That's the capability flexbox simply doesn't have.
What flexbox is actually good at
Flexbox shines when you're arranging a set of items whose exact number or size you don't want to hardcode: a navbar with a logo on the left and links on the right, a row of buttons that should distribute evenly, a card's internal layout where an image, title, and button stack vertically and you want the button pinned to the bottom regardless of how much title text there is. justify-content and align-items do most of the work, and flex-grow/flex-shrink handle the leftover space.
What grid is actually good at
Grid is built for layouts where you're thinking in a structure first: a page shell with a header, sidebar, main content, and footer; a photo gallery where some images should span two columns; a form where labels in a column need to line up with inputs in the next column, row after row. The moment you catch yourself nesting flexbox containers inside flexbox containers to fake a grid, that's usually the signal you actually wanted grid from the start.
You can -- and often should -- use both
These aren't competing tools you pick once for an entire page. A common and perfectly reasonable pattern is grid for the overall page structure, with flexbox used inside individual grid cells to align content within them. A card in a grid-based gallery might use flexbox internally to keep its icon and text aligned on one row.
Try it visually instead of guessing
Reading the property list only gets you so far -- the fastest way to build intuition is to change values and watch the layout respond. The CSS Flexbox Generator and CSS Grid Generator let you build a layout visually and copy out the generated CSS, which is a faster way to internalize the difference than reading about it.