- Flexbox doesn’t have collapsing margins.
- Flexbox doesn’t have anything akin to
border-spacing
for tables (edit: CSS propertygap
fulfills this role in newer browsers, Can I use)
Therefore achieving what you are asking for is a bit more difficult.
In 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.
.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; }
<div class="upper"> <div>aaa<br/>aaa</div> <div>aaa</div> <div>aaa<br/>aaa</div> <div>aaa<br/>aaa<br/>aaa</div> <div>aaa</div> <div>aaa</div> </div> <div class="upper mc"> <div>aaa<br/>aaa</div> <div>aaa</div> <div>aaa<br/>aaa</div> <div>aaa<br/>aaa<br/>aaa</div> <div>aaa</div> <div>aaa</div> </div>