css flex gap between items
/* limited support (Q1/2021: Firefox, Chrome, Safari) */ .flex-container { display: flex; gap: 5px; } /* broad support */ .flex-item { margin: 5px; /* and/or */ padding: 5px; }
gap between two flex items
.upper { margin:30px; display:flex; flex-direction:row; width:300px; height:80px; border:1px red solid; padding:5px; /* this */ } .upper > div { flex:1 1 auto; border:1px red solid; text-align:center; margin:5px; /* and that, will result in a 10px gap */ } .upper.mc /* multicol test */ {flex-direction:column;flex-wrap:wrap;width:200px;height:200px;}
Source: stackoverflow.com