add space between flex items

1/* There is now a `gap` CSS property
2** This works for <flex>, <grid>, and <multicolumn> layouts
3** #box{} would lay out all it's children with 10px spacing between 
4** different rows and 20px betwen different columns
5*/
6#box {
7  display: flex;
8  flex-wrap: wrap;
9  gap: 10px 20px; /* row-gap [column-gap]*/
10}
11
12/* Supported by most modern browesers, Safari excluded. */

1justify-content: space-between;

1.flex-gap {
2  display: inline-flex;
3  flex-wrap: wrap;
4}
5
6.flex-gap > div {
7  margin: 6px; /* HERE WE ADD THE SPACE */
8}

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;}