CSS — Flexbox Albatross method for context aware media queries

flexbox-albatross.html

<main class="parent">
  <div class="child"></div>
  <div class="gutter"></div>
  <div class="child"></div>
</main>

flexbox-albatross.scss

$gutter: 1.5rem;
$children-min-width: 40rem; // Break into fullsize columns if children together are smaller than this

.parent {
  display: flex;  
  flex-wrap: wrap;

  .child {
    flex-grow: 1;
    flex-basis: calc((#{$children-min-width} - 100%) * 999); // The flexbox albatross
  }
}

/* If more than 4 children, go fullsize */
.parent > :nth-last-child(n+5),
.parent > :nth-last-child(n+5) ~ * {
  flex-basis: 100%;
}

.gutter {
  flex: 0 1 $gutter;
  min-height: $gutter;
}

Source: http://www.heydonworks.com/article/the-flexbox-holy-albatross
&&
https://css-tricks.com/putting-the-flexbox-albatross-to-real-use/