Declaring gap for flexbox items using margin and negative margin

by Konstantin Rouda

HTML

<div class="c-container">
  <aside class="c-container__aside">some text to see flex-basis value</aside>
  <div class="c-container__content"></div>
</div>

CSS

HTML {
  /*using system font-stack*/
  font-family: Mina, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 115%; /*~18px*/
  line-height: 1.5;
  box-sizing: border-box;
}

BODY {
  margin: 0;
  color: rgb(58, 61, 64);
  background-color: rgb(240, 240, 240);
}

*, *::before, *::after {
  box-sizing: inherit;
  color: inherit;
}

/*Actual Style*/
.c-container {
  display: flex;
  flex-wrap: wrap;
  min-height: 50vh;
/*   margin: -0.5rem; */
  outline: 1px solid;
  transform: translateY(20%);
}

.c-container > * {
  margin: 0.5rem;
  /*you could see the effect if uncomment the line below*/
/* margin-left: 0.5rem; */
}

.c-container__aside {
  flex-basis: 20rem;
  flex-grow: 1;
  background: firebrick;
}

.c-container__content {
  min-width: 50%;
  flex-basis: 0;
  flex-grow: 222;
  background: cornflowerblue;
}