ronpat
April 24, 2016, 9:05pm
1
Flexbox should facilitate the easy reversal of a series of boxes.
Normally, one year of calendar thumbs start with January at the top left, populate the top row with 6 months then wrap and continue from left to right in the second row. December would be in the bottom right corner.
I would like to be able to toggle/reverse the display of those thumbs so the latest month appears in the top left position and the older flow to the right and wrap to the second row.
In this example, I can add a className âlatestfirstâ to any parent of the list items (calendar boxes) and achieve my desired result. (you can delete the leading âxâ from "xleadingfirst in the div)
Is changing the order the only way to do this, or have I overlooked another simpler method?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>newsletter thumbs</title>
<!--
-->
<style type="text/css">
html {
box-sizing:border-box;
overflow-y:scroll;
}
*,*:before,*:after {
box-sizing:inherit;
}
.outer {
max-width:942px;
padding:3px;
margin:0 auto;
outline:1px dashed magenta;
}
ul {
list-style:none;
display:flex;
flex-flow:row wrap; /* flex-flow:[flex-direction: + flex-wrap:] */
justify-content:flex-start;
padding:0;
margin:0;
}
li {
width:150px;
height:192px;
margin:3px;
background-color:#ccc;
}
.latestfirst li:nth-child(1) {order:12}
.latestfirst li:nth-child(2) {order:11}
.latestfirst li:nth-child(3) {order:10}
.latestfirst li:nth-child(4) {order:9}
.latestfirst li:nth-child(5) {order:8}
.latestfirst li:nth-child(6) {order:7}
.latestfirst li:nth-child(7) {order:6}
.latestfirst li:nth-child(8) {order:5}
.latestfirst li:nth-child(9) {order:4}
.latestfirst li:nth-child(10) {order:3}
.latestfirst li:nth-child(11) {order:2}
.latestfirst li:nth-child(12) {order:1}
@media screen and (max-width:973px) { /* 958 + 15 */
.outer {max-width:630px}
}
@media screen and (max-width:662px) {
.outer {max-width:474px}
}
@media screen and (max-width:505px) {
.outer {max-width:318px}
}
@media screen and (max-width:349px) {
.outer {max-width:162px}
}
</style>
</head>
<body>
<div class="outer xlatestfirst">
<ul>
<li>January</li>
<li>February</li>
<li>March</li>
<li>April</li>
<li>May</li>
<li>June</li>
<li>July</li>
</ul>
</div>
</body>
</html>
BONUS! If anyone would like to contribute a vanilla JS add/delete className toggle Iâd be grateful
The following is how youâd toggle âlatestfirstâ on the first tag with a class of âouterâ using vanilla JavaScript
document.querySelector('.outer').classList.toggle('latestfirst');
1 Like
I just tried something simple w/o the latestfirsts but it didnât work very well
ul {
direction: rtl;
}
ul li {
direction: ltr;
text-align: left;
}
ronpat
April 24, 2016, 9:50pm
4
Maybe I should have titled this a flexbox âchallengeâ question. (except that I donât know the answer ).
1 Like
Hi there ronpat,
does this helpâŚ
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>newsletter thumbs</title>
<style type="text/css">
html {
box-sizing:border-box;
overflow-y:scroll;
}
*,*:before,*:after {
box-sizing:inherit;
}
.outer {
max-width:942px;
padding:3px;
margin:0 auto;
outline:1px dashed magenta;
}
.outer ul {
list-style:none;
display:flex;
flex-flow:row wrap; /* flex-flow:[flex-direction: + flex-wrap:] */
justify-content:flex-start;
padding:0;
margin:0;
}
.outer li {
width:150px;
height:192px;
margin:3px;
background-color:#ccc;
}
.outer li:nth-child(1) {order:12}
.outer li:nth-child(2) {order:11}
.outer li:nth-child(3) {order:10}
.outer li:nth-child(4) {order:9}
.outer li:nth-child(5) {order:8}
.outer li:nth-child(6) {order:7}
.outer li:nth-child(7) {order:6}
.outer li:nth-child(8) {order:5}
.outer li:nth-child(9) {order:4}
.outer li:nth-child(10) {order:3}
.outer li:nth-child(11) {order:2}
.outer li:nth-child(12) {order:1}
@media screen and (max-width:973px) { /* 958 + 15 */
.outer {max-width:630px}
}
@media screen and (max-width:662px) {
.outer {max-width:474px}
}
@media screen and (max-width:505px) {
.outer {max-width:318px}
}
@media screen and (max-width:349px) {
.outer {max-width:162px}
}
</style>
</head>
<body>
<div class="outer xlatestfirst">
<ul>
<li>January</li>
<li>February</li>
<li>March</li>
<li>April</li>
<li>May</li>
<li>June</li>
<li>July</li>
<li>August</li>
<li>September</li>
<li>October</li>
<li>November</li>
<li>December</li>
</ul>
</div>
</body>
</html>
coothead
ronpat
April 24, 2016, 10:08pm
6
Mr. C, If Iâm seeing this correctly, you have substituted .outer
for .latestfirst
in the âorder-changerâ, so the mechanism used to reverse the thumbs is unchanged. The downside of using .outer
is that I would have to delete .outer to âundoâ the reversal and therefore likely have to add another class to the div
to target the other decorative styles that shouldnât be removed.
Have I missed something obvious (try to be gentle).
EDIT: I just added the word âtoggleâ in the first post. Sorry for the omission.
Hi there ronpat,
sorry, but I did not see âlatestfirstâ when I first looked at your code.
Looking at it again, I now see âŚ
<div class="outer xlatestfirst">
So, emove the the âx â and youâre on youâre way.
coothead
ronpat
April 24, 2016, 10:30pm
8
Yep, just a toggle away. I posted the issue/question because I wonder if there is another way of doing this same thing without using the series of order-reversing statements. They work quite well, but I wanted to hear second opinions from those more experienced about the possibility of other methods if there are any. Maybe I did it right the first time . My flex-confidence is pretty low.
1 Like
ronpat:
Yep, just a toggle away
Here is the toggleâŚ
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>newsletter thumbs</title>
<style type="text/css">
html {
box-sizing:border-box;
overflow-y:scroll;
}
*,*:before,*:after {
box-sizing:inherit;
}
.outer {
max-width:942px;
padding:3px;
margin:0 auto;
outline:1px dashed magenta;
}
.outer ul {
list-style:none;
display:flex;
flex-flow:row wrap; /* flex-flow:[flex-direction: + flex-wrap:] */
justify-content:flex-start;
padding:0;
margin:0;
}
.outer li {
width:150px;
height:192px;
margin:3px;
background-color:#ccc;
}
#cb { display:none;}
#button {
display:block;
width:8em;
line-height:1.62em;
border:0.1em solid #999;
border-radius:0.5em;
margin:0.5em auto;
text-align:center;
cursor:pointer;
}
#button::before { content:'Dec. to Jan.';}
#cb:checked~#button::before { content:'Jan. to Dec.';}
#cb:checked~.outer ul li:nth-child(1) {order:12}
#cb:checked~.outer ul li:nth-child(2) {order:11}
#cb:checked~.outer ul li:nth-child(3) {order:10}
#cb:checked~.outer ul li:nth-child(4) {order:9}
#cb:checked~.outer ul li:nth-child(5) {order:8}
#cb:checked~.outer ul li:nth-child(6) {order:7}
#cb:checked~.outer ul li:nth-child(7) {order:6}
#cb:checked~.outer ul li:nth-child(8) {order:5}
#cb:checked~.outer ul li:nth-child(9) {order:4}
#cb:checked~.outer ul li:nth-child(10) {order:3}
#cb:checked~.outer ul li:nth-child(11) {order:2}
#cb:checked~.outer ul li:nth-child(12) {order:1}
@media screen and (max-width:973px) { /* 958 + 15 */
.outer {max-width:630px}
}
@media screen and (max-width:662px) {
.outer {max-width:474px}
}
@media screen and (max-width:505px) {
.outer {max-width:318px}
}
@media screen and (max-width:349px) {
.outer {max-width:162px}
}
</style>
</head>
<body>
<input id="cb" type="checkbox">
<label id="button" for="cb"></label>
<div class="outer">
<ul>
<li>January</li>
<li>February</li>
<li>March</li>
<li>April</li>
<li>May</li>
<li>June</li>
<li>July</li>
<li>August</li>
<li>September</li>
<li>October</li>
<li>November</li>
<li>December</li>
</ul>
</div>
</body>
</html>
coothead
1 Like
ronpat
April 24, 2016, 11:29pm
10
Thanks for the CSS toggle!
No problem, youâre very welcome.
coothead
ronpat
April 25, 2016, 8:16am
13
SamA74:
row-reverse ?
Show me . Be sure to test with fewer than 12 thumbs.
Hi there ronpat,
ThisâŚ
#cb:checked~.outer ul {flex-direction:row-reverse}
âŚdoes not work.
coothead
SamA74
April 25, 2016, 8:23am
15
ronpat:
Show me
Busy at the moment so have not tested, but the idea is, instead of all those nth child and order, just use flex-flow: row-reverse wrap
to reverse the order.
ronpat
April 25, 2016, 8:34am
16
I tried several combinations of other-than-order methods but was unable to make any work satisfactorily. The series of (re)orders was the only one that worked the way I wanted it to. I decided that I must be overlooking something, thus this topic.
SamA74
April 25, 2016, 8:39am
17
I know with flex box it can be easy to forget about some of the rarely used properties. I thought maybe you overlooked this one that seems the obvious solution to reversing the order.
1 Like
ronpat
April 25, 2016, 8:59am
18
And Iâve been known to forget even the easiest ones which is why I posted this âconfessionalâ/âchallengeâ. So far, though, itâs looking like the nth-child/order method, as âbusyâ as it looks, is the only method that works as desired.
Changes from {flex-flow:row wrap}
to {flex-flow:row-reverse wrap}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>newsletter thumbs</title>
<!--
rowrev
-->
<style type="text/css">
html {
box-sizing:border-box;
overflow-y:scroll;
}
*,*:before,*:after {
box-sizing:inherit;
}
.outer {
max-width:942px;
padding:3px;
margin:0 auto;
outline:1px dashed magenta;
}
ul {
list-style:none;
display:flex;
flex-flow:row wrap; /* flex-flow:[flex-direction: + flex-wrap:] */
justify-content:flex-start;
padding:0;
margin:0;
}
li {
width:150px;
height:192px;
margin:3px;
background-color:#ccc;
}
.rowrev ul {flex-flow:row-reverse wrap;}
.latestfirst li:nth-child(1) {order:12}
.latestfirst li:nth-child(2) {order:11}
.latestfirst li:nth-child(3) {order:10}
.latestfirst li:nth-child(4) {order:9}
.latestfirst li:nth-child(5) {order:8}
.latestfirst li:nth-child(6) {order:7}
.latestfirst li:nth-child(7) {order:6}
.latestfirst li:nth-child(8) {order:5}
.latestfirst li:nth-child(9) {order:4}
.latestfirst li:nth-child(10) {order:3}
.latestfirst li:nth-child(11) {order:2}
.latestfirst li:nth-child(12) {order:1}
@media screen and (max-width:973px) { /* 958 + 15 */
.outer {max-width:630px}
}
@media screen and (max-width:662px) {
.outer {max-width:474px}
}
@media screen and (max-width:505px) {
.outer {max-width:318px}
}
@media screen and (max-width:349px) {
.outer {max-width:162px}
}
button {
display:block;
margin:0 auto;
}
</style>
</head>
<body>
<div class="outer rowrev">
<ul>
<li>January</li>
<li>February</li>
<li>March</li>
<li>April</li>
<li>May</li>
<li>June</li>
<li>July</li>
</ul>
</div>
</body>
</html>
Hi there ronpat,
as you actually only have one row - ( Jan to Dec ) - using
âorderâ is the correct solution.
coothead
1 Like
PaulOB
April 25, 2016, 1:28pm
20
ronpat:
So far, though, itâs looking like the nth-child/order method, as âbusyâ as it looks, is the only method that works as desired.
I think âorderâ is the only way to do this unless you don;t mind items stretching to fill the available space (or donât mind that the first row has the gap to the left).
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>newsletter thumbs</title>
<!--
-->
<style type="text/css">
html {
box-sizing:border-box;
overflow-y:scroll;
}
*, *:before, *:after {
box-sizing:inherit;
}
.outer {
max-width:942px;
padding:3px;
margin:0 auto 25px;
outline:1px dashed magenta;
}
ul {
list-style:none;
padding:0;
margin:0;
font-size:0;
display:flex;
flex-flow:row wrap;
flex-wrap:wrap-reverse;
flex-direction:row-reverse;
justify-content:space-between;
}
li {
width:150px;
height:192px;
margin:3px;
background-color:#ccc;
font-size:1rem;
text-align:left;
flex:1 0 auto;
}
@media screen and (max-width:973px) {
.outer {max-width:630px }
}
@media screen and (max-width:662px) {
.outer {max-width:474px}
}
@media screen and (max-width:505px) {
.outer {max-width:318px}
}
@media screen and (max-width:349px) {
.outer {max-width:162px}
}
</style>
</head>
<body>
<div class="outer">
<ul>
<li>January</li>
<li>February</li>
<li>March</li>
<li>April</li>
<li>May</li>
<li>June</li>
<li>July</li>
<li>August</li>
<li>September</li>
<li>October</li>
<li>November</li>
<li>December</li>
</ul>
</div>
<div class="outer">
<ul>
<li>January</li>
<li>February</li>
<li>March</li>
<li>April</li>
<li>May</li>
<li>June</li>
<li>July</li>
<li>August</li>
<li>September</li>
<li>October</li>
<li>November</li>
</ul>
</div>
<div class="outer">
<ul>
<li>January</li>
<li>February</li>
<li>March</li>
<li>April</li>
<li>May</li>
<li>June</li>
<li>July</li>
<li>August</li>
<li>September</li>
<li>October</li>
</ul>
</div>
<div class="outer">
<ul>
<li>January</li>
<li>February</li>
<li>March</li>
<li>April</li>
<li>May</li>
<li>June</li>
<li>July</li>
</ul>
</div>
</body>
</html>
And just for fun âwho needs flexboxâ
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>newsletter thumbs</title>
<!--
-->
<style type="text/css">
html {
box-sizing:border-box;
overflow-y:scroll;
}
*, *:before, *:after {
box-sizing:inherit;
}
.outer {
max-width:942px;
padding:3px;
margin:0 auto;
outline:1px dashed magenta;
}
ul {
list-style:none;
padding:0;
margin:0;
text-align:right;
font-size:0;
}
li {
width:150px;
height:192px;
margin:3px;
background-color:#ccc;
display:inline-block;
font-size:1rem;
text-align:left;
}
ul, li {
transform:rotate(180deg)
}
@media screen and (max-width:973px) { /* 958 + 15 */
.outer {max-width:630px }
}
@media screen and (max-width:662px) {
.outer {max-width:474px}
}
@media screen and (max-width:505px) {
.outer {max-width:318px}
}
@media screen and (max-width:349px) {
.outer {max-width:162px}
}
</style>
</head>
<body>
<div class="outer">
<ul>
<li>January</li>
<li>February</li>
<li>March</li>
<li>April</li>
<li>May</li>
<li>June</li>
<li>July</li>
<li>August</li>
<li>September</li>
<li>October</li>
<li>November</li>
<li>December</li>
</ul>
</div>
</body>
</html>
Only works with full rows.
3 Likes