Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Code examples for my Quantity Queries meet Flexbox post.
.listing--events {
display: flex;
flex-wrap: wrap;
}
.event {
box-sizing: border-box;
padding: 1.25rem; /* 20px padding */
margin: 0 0 1.25rem 0; /* 20px bottom margin */
flex: 0 0 100%;
}
<ul class="listing listing--events">
<li class="listing__item listing__item--1 event event--future">
<!-- content -->
</li>
<!-- lis continue -->
</ul>
.listing--events {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.event {
box-sizing: border-box;
padding: 1.25rem; /* 20px */
margin: 0 0 1.25rem 0; /* 20px v */
flex: 0 0 100%;
}
@media only screen and (min-width: 28.75em) {
/* 20px gap divided by 2 events per row */
.event {
flex: 0 0 calc( 50% - 1.25rem / 2 );
margin-left: 1.25rem; /* 20px < */
}
/* Remove left margin for row starters */
.event:nth-child(odd) {
margin-left: 0;
}
/* Reset margins on "future" events
& remove the correct one */
.event--future:nth-child(odd) {
margin-left: 1.25rem;
}
.event--future:nth-child(even) {
margin-left: 0;
}
/* Quantity Query - when more than 1,
make the first span both columns */
.event--future:nth-last-child(n+1):first-child {
flex: 0 0 100%;
font-size: 1.5em;
margin-left: 0;
}
}
.listing--events {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.event {
box-sizing: border-box;
padding: 1.25rem; /* 20px */
margin: 0 0 1.25rem 0; /* 20px v */
flex: 0 0 100%;
}
@media only screen and (min-width: 28.75em) {
/* 20px gap divided by 2 events per row */
.event {
flex: 0 0 calc( 50% - 1.25rem / 2 );
margin-left: 1.25rem; /* 20px < */
}
/* Remove left margin for row starters */
.event:nth-child(odd) {
margin-left: 0;
}
/* Reset margins on "future" events
& remove the correct one */
.event--future:nth-child(odd) {
margin-left: 1.25rem;
}
.event--future:nth-child(even) {
margin-left: 0;
}
/* Quantity Query - when more than 1,
make the first span both columns */
.event--future:nth-last-child(n+1):first-child {
flex: 0 0 100%;
font-size: 1.5em;
margin-left: 0;
}
}
@media only screen and (min-width: 43.125em) {
/* 1/3 width with 20px gutter */
.event {
flex: 0 0 calc( 100% / 3 - .875rem );
}
/* Reset margins */
.event:nth-child(even),
.event:nth-child(odd) {
margin-left: 1.25rem;
}
/* Normal Grid margin removal */
.event:nth-child(3n+1) {
margin-left: 0;
}
/* Correct margins for the future events */
.event--future:nth-child(3n+1) {
margin-left: 1.25rem;
}
/* Quantity Query - when more than 2,
make the first 2 go 50% */
.event--future:nth-last-child(n+2):first-child,
.event--future:nth-last-child(n+2):first-child + .event--future {
flex: 0 0 calc( 50% - 1.25rem / 2 );
font-size: 1.5em;
}
/* Quantity + nth for margin removal */
.event--future:nth-last-child(n+2):first-child ~ .event--future:nth-child(3n) {
margin-left: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.