Module:Flexbox/styles.css: Difference between revisions

Revision as of 01:16, 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 */
}