Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Module:Flexbox/styles.css: Difference between revisions

From Credoth
Created page with ".template-flexbox { display: flex; gap: var(--template-flexbox-gap); flex-wrap: wrap; flex-direction: var(--template-flexbox-direction); } .template-flexbox-item { --template-flexbox-flex-basis: calc( (100% / var(--template-flexbox-columns)) - ( var(--template-flexbox-gap) / var(--template-flexbox-columns) * (var(--template-flexbox-columns) - 1) ) ); flex-basis: var(--template-flexbox-flex-basis); flex-grow: 1; } @media (max-width: 1120px) { ...."
 
mNo edit summary
 
(15 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* Container for the flexbox */
.template-flexbox {
.template-flexbox {
display: flex;
    display: flex;
gap: var(--template-flexbox-gap);
    gap: var(--template-flexbox-gap); /* space between items */
flex-wrap: wrap;
    flex-wrap: wrap;
flex-direction: var(--template-flexbox-direction);
    flex-direction: var(--template-flexbox-direction);
    --template-flexbox-columns: 3; /* Default columns count */
    justify-content: var(--template-flexbox-justify);
}
}


/* Flex items */
.template-flexbox-item {
.template-flexbox-item {
--template-flexbox-flex-basis: calc(
    --template-flexbox-item-span: 1; /* Default span is 1 */
(100% / var(--template-flexbox-columns)) -
    /* Adjust the width of each column by factoring in the gap */
(
    --template-flexbox-item-width: calc((100% - (var(--template-flexbox-gap) * (var(--template-flexbox-columns) - 1))) / var(--template-flexbox-columns));
var(--template-flexbox-gap) / var(--template-flexbox-columns) *
    flex-basis: var(--template-flexbox-item-width); /* set the width of each column */
(var(--template-flexbox-columns) - 1)
    flex-grow: 0;  /* Prevent growing */
)
    flex-shrink: 0; /* Prevent shrinking */
);
flex-basis: var(--template-flexbox-flex-basis);
flex-grow: 1;
}
}
 
.template-flexbox-item:last-child {
@media (max-width: 1120px) {
  margin-left: -135px; /* consider gap in this value, if applicable */
.template-flexbox {
--template-flexbox-columns: 2 !important;
}
}
}


@media (max-width: 640px) {
.template-flexbox-item:nth-last-child(2) {
.template-flexbox {
  margin-right: 135px; /* consider gap in this value, if applicable */}
--template-flexbox-columns: 1 !important;
}
}

Latest revision as of 01:41, 29 December 2024

/* Container for the flexbox */
.template-flexbox {
    display: flex;
    gap: var(--template-flexbox-gap);  /* space between items */
    flex-wrap: wrap;
    flex-direction: var(--template-flexbox-direction);
    --template-flexbox-columns: 3; /* Default columns count */
    justify-content: var(--template-flexbox-justify);
}

/* Flex items */
.template-flexbox-item {
    --template-flexbox-item-span: 1; /* Default span is 1 */
    /* Adjust the width of each column by factoring in the gap */
    --template-flexbox-item-width: calc((100% - (var(--template-flexbox-gap) * (var(--template-flexbox-columns) - 1))) / var(--template-flexbox-columns));
    flex-basis: var(--template-flexbox-item-width);  /* set the width of each column */
    flex-grow: 0;  /* Prevent growing */
    flex-shrink: 0;  /* Prevent shrinking */
}
.template-flexbox-item:last-child {
  margin-left: -135px; /* consider gap in this value, if applicable */
}

.template-flexbox-item:nth-last-child(2) {
  margin-right: 135px; /* consider gap in this value, if applicable */}