Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save avisek/cf4216f88a6b234457215551e3732699 to your computer and use it in GitHub Desktop.
Save avisek/cf4216f88a6b234457215551e3732699 to your computer and use it in GitHub Desktop.
Flexbox Holy Albatross + Quantity Query
<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>
.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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment