(CSS) Beginner question about Flex cell width control

There are a few mistakes in the comments with regards to Flex.
Firstly - Everyone should start moving away from percentage widths. Still used, still useful for sure but when you what proper scaling and dynmaic scaling there are more options.
Viewport width and height - vw, vh
Rem - Root EM. This is where in html you have a font size you can have direct scaling of elements based on that value.
Calc is used in an example here and this is a great way to also do values based on the conditions of the display.

In terms of flex spacing, just as CSS Grid you do not do this with margin, you use the gap value.

 gap: 0.5em;

For example.

With regard to Grid you can avoid using media quries. Again you have values to define the current browser conditions now to manage this sort of thing.
You can repeat your column rules and you can also define the content specifc values (if you want) that it conforms too.

grid-template-columns: repeat(3, fit-content(410px));

grid-template-columns: minmax(0, 300px) 1fr;

grid-gap: 20px;

flex-basis: fit-content;

This is a good reference for Flexbox:

https://developer.mozilla.org/en-US/docs/Web/CSS/flex

This is what I would use:

.flex {
    display: flex;
    justify-content: space-between;
}

.flex .cell {
    flex-basis: calc(50% - 1.5em); /* width minus gap */
}

A few remarks:

.flex {

Just use percentages for widths when youre constructing your equal width columns in Flexbox. You could also use flex-basis to set the column width (see code below). Flex doesnt really play that nicely with gap like Grid does as it tends to add the gap to the right of each container if you set the gap using px, whereas Grid just adds the space between columns, assuming you set the column widths using the grid fr (fraction) unit. You can of course use css calc to overcome the gap issues in Flexbox if you do require the gap to remain at a static px width - you would set the column width as width: calc(50%-15px); lf I use Flex then I use justify-content: space-between; and set the column width to 48% or 49% which creates a gap between the columns.

I only use flex: 1; (the short version of flex-grow: 1; ) if I want a column or row to consume the remaining space. Example I might set the 1st column to 30% or in some cases give it a specific width of 400px - I can then set flex: 1; on the 2nd column to force it to take up the rest of its parent container space. flex: 1; is useful at times, particularly when you want buttons to line up at the foot of each column, other than that I dont find much use for it but Im sure it has other possibilties, maybe.

You may find the below link useful, its a visual guide about Flexbox properties:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 

FLEXBOX:

.flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flex .cell {
width: 48%;
/ * flex-basis: 48%; You can also use this instead of width */
background-color: #f2f2f2;
}
@media screen and (max-width: 761px) {
.flex .cell {
width: 100%;
/* flex-basis: 100%; You can also use this instead of width */
}
}

GRID:

.flex {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.flex .cell {
background-color: #f2f2f2;
}
@media screen and (max-width: 761px) {
.flex {
grid-template-columns: 1fr;
}
}