gap between two flex items

1/* limited support (Q1/2021: Firefox, Chrome, Safari) */
2.flex-container
3{
4  display: flex;
5  gap: 5px;
6}
7
8/* broad support */
9.flex-item
10{
11  margin: 5px;
12  /* and/or */
13  padding: 5px;
14}

1.upper
2{
3  margin:30px;
4  display:flex;
5  flex-direction:row;
6  width:300px;
7  height:80px;
8  border:1px red solid;
9
10  padding:5px; /* this */
11}
12
13.upper > div
14{
15  flex:1 1 auto;
16  border:1px red solid;
17  text-align:center;
18
19  margin:5px;  /* and that, will result in a 10px gap */
20}
21
22.upper.mc /* multicol test */
23{flex-direction:column;flex-wrap:wrap;width:200px;height:200px;}