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. */
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;}
1/**
2Flexbox doesn't have collapsing margins.
3Flexbox doesn't have anything akin to border-spacing for tables (except for CSS property gap which isn't supported in Safari, caniuse)
4Therefore achieving what you are asking for is a bit more difficult.
5
6In my experience, the "cleanest" way that doesn't use :first-child/:last-child and works without any modification on flex-wrap:wrap is to set padding:5px on the container and margin:5px on the children. That will produce a 10px gap between each child and between each child and their parent.
7**/
8.upper
9{
10 margin:30px;
11 display:flex;
12 flex-direction:row;
13 width:300px;
14 height:80px;
15 border:1px red solid;
16
17 padding:5px; /* this */
18}
19
20.upper > div
21{
22 flex:1 1 auto;
23 border:1px red solid;
24 text-align:center;
25
26 margin:5px; /* and that, will result in a 10px gap */
27}
28
29.upper.mc /* multicol test */
30{flex-direction:column;flex-wrap:wrap;width:200px;height:200px;}
31<div class="upper">
32 <div>aaa<br/>aaa</div>
33 <div>aaa</div>
34 <div>aaa<br/>aaa</div>
35 <div>aaa<br/>aaa<br/>aaa</div>
36 <div>aaa</div>
37 <div>aaa</div>
38</div>
39
40<div class="upper mc">
41 <div>aaa<br/>aaa</div>
42 <div>aaa</div>
43 <div>aaa<br/>aaa</div>
44 <div>aaa<br/>aaa<br/>aaa</div>
45 <div>aaa</div>
46 <div>aaa</div>
47</div>