The Flexbox Holy Albatross Reincarnated

You may want to read the original Flexbox Holy Albatross post but basically, I missed a step (I was hungover): You can switch between horizontal (multi-column) to vertical (single column) Flexbox layouts just using flex-basis. No min-width or max-width needed — in fact, they just restrict Flexbox from doing its beautiful Flexbox thing.

This way, any number of horizontal elements can become vertical elements at a ‘container query’ breakpoint (40rem in the below example).

Here’s a CodePen.

The code

.container {
  display: flex;
  flex-wrap: wrap;
  --margin: 1rem;
  --modifier: calc(40rem - 100%);
  margin: calc(var(--margin) * -1);
}

.container > * {
  flex-grow: 1;
  flex-basis: calc(var(--modifier) * 999);
  margin: var(--margin);
}

Also: You can set different individual item widths with flex-grow still.

The Holy Albatross with a Quantity Query

What if you wanted to display the items horizontally above a certain container width only if there are fewer than a certain number of items. This CodePen does just that. It also removes the custom properties (which are just for readability, really) so it works in Internet Explorer!