:root {
    --gap: 20px;
}

.f3 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--gap);
}

/* INFO:
flex: 0 1 calc(...) означава:
    0: без растеж
    1: позволява свиване
    calc(...): изчислява ширина така, че да се поберат 3 елемента в ред, включвайки gap
    ако има 3 елемента на ред, между тях ще има 2 празнини по 20px (затова изваждаме 40px)
*/
.f3 > DIV {
    flex: 0 1 calc((100% - var(--gap) * 2) / 3); /* 40px = 2 * gap (ляво + дясно) */
    box-sizing: border-box;
}
/* <<< */


/* INFO:
flex: 0 1 calc(...) означава:
    0: без растеж
    1: позволява свиване
    TODO: TEST
*/
.f3 > DIV {
    flex: 0 1 33%; 
    box-sizing: border-box;
}
/* <<< */


/* INFO:
flex: 0 1 calc(...) означава:
    0: без растеж
    1: позволява свиване
    TODO: TEST
*/
.f3 > DIV {
    flex: 0 1; 
    min-width: 33%; /* OR min-width: 300px; */
    box-sizing: border-box;
}
/* <<< */