gaps between elements in a box

by Richard Hunter

HTML

<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<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

CSS

.upper {
  margin: 30px;
  display: flex;
  flex-direction: row;
  width: 300px;
  height: 80px;
  border: 1px red solid;

  padding: 5px 5px 4px 4px;
}

.upper>div {
  flex: 1 1 auto;
  border: 1px red solid;
  text-align: center;

  margin: 4px 4px 5px 5px;
  /* and that, will result in a 10px gap */
}

.upper.mc

/* multicol test */
  {
  flex-direction: column;
  flex-wrap: wrap;
  width: 200px;
  height: 200px;
}