Flex 1st row 1 item, 2nd row 3 items

I'm trying to build out something with flex that has a layout like this...

  [][][][][][][]

My breakpoints are fine when stacked (1 item per row), or 2 items per row by using

ul {    flex-direction: row;    flex-wrap: wrap;}li {    flex: 0 0 48%;}li:first-of-type {    flex: 0 1 50%;}

But once I get to 3 per line the first item doesn't seem to want to be by itself. I'm fine with having the flex code change with @media breaks, but I need to stay in flex as my last line needs to have any items below 3 centered aligned, not left aligned.

I've tried other combinations but have had no luck keeping the first line item the same size as the remaining row items.