Flexbox Holy Albatross + Quantity Query

flexbox-holy-albatross-quantity-query.markdown

Flexbox Holy Albatross + Quantity Query

A Pen by Heydon on CodePen.

License.

index.html

<h1>Flexbox Holy Albatross + Quantity Query</h1>
<p>In this demo, flex items are displayed horizontally if:</p>
<ol>
  <li>The flex container is more than <code>40rem</code> wide</li>
  <li>There are fewer than 5 flex items in total</li>
</ol>

<h2>4 items</h2>
<div class="container" role="group" aria-label="Four items at either 25% or 100% width">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <!-- add more or remove some -->
</div>

<h2>5 items</h2>
<div class="container" role="group" aria-label="Four items at either 25% or 100% width">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <!-- add more or remove some -->
</div>

style.css

.container {
  display: flex;
  flex-wrap: wrap;
  margin: -1rem;
}

.container > * {
  height: 20vh;
  color: #fff;
  background-color: #000;
  flex-grow: 1;
  flex-basis: calc((40rem - 100%) * 999);
  margin: 1rem;
}

.container > :nth-last-child(n+5),
.container > :nth-last-child(n+5) ~ * {
  flex-basis: 100%;
}

/* Just for the demo */
body {
  padding: 2rem;
  margin: 0 auto;
  max-width: 60rem;
}

.container > * {
  height: 20vh;
  background-color: #000;
}