Template:Card flex/styles.css: Difference between revisions
From WikiMSK
No edit summary |
No edit summary |
||
Line 3: | Line 3: | ||
} | } | ||
.cardflex .card-container{ | /* one item */ | ||
.cardflex .card-container:nth-last-child(1) { | |||
/* -or- li:only-child { */ | |||
width: 100%; | |||
} | |||
/* two items */ | |||
.cardflex .card-container:nth-last-child(2), | |||
.cardflex .card-container:nth-last-child(2) { | |||
width: 50%; | |||
} | |||
/* three items */ | |||
.cardflex .card-container:nth-last-child(3), | |||
.cardflex .card-container:nth-last-child(3) { | |||
width: 33.3333%; | |||
} | |||
/* four items */ | |||
.cardflex .card-container:nth-last-child(4), | |||
.cardflex .card-container:nth-last-child(4) { | |||
width: 25%; | |||
} | } | ||
Revision as of 21:38, 19 March 2022
.cardflex {
display:flex; flex-direction: row; flex-wrap: wrap;
}
/* one item */
.cardflex .card-container:nth-last-child(1) {
/* -or- li:only-child { */
width: 100%;
}
/* two items */
.cardflex .card-container:nth-last-child(2),
.cardflex .card-container:nth-last-child(2) {
width: 50%;
}
/* three items */
.cardflex .card-container:nth-last-child(3),
.cardflex .card-container:nth-last-child(3) {
width: 33.3333%;
}
/* four items */
.cardflex .card-container:nth-last-child(4),
.cardflex .card-container:nth-last-child(4) {
width: 25%;
}
@media only screen and (max-width: 1200px) {
.cardflex .card-container{
width:50%;
}
}
@media only screen and (max-width: 1000px) {
.cardflex .card-container{
width:100%;
}
}