Module:Flexbox/styles.css

/* 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 */
    margin: 0; /* Reset margin */
    padding: 0; /* Reset padding */
}

/* Flex items */
.template-flexbox-item {
    --template-flexbox-item-span: 1; /* Default span is 1 */
    --template-flexbox-item-width: calc((100% - (var(--template-flexbox-gap) * (var(--template-flexbox-columns) - 1))) / var(--template-flexbox-columns) * var(--template-flexbox-item-span));
    
    /* If span equals columns, take up the full width */
    flex-basis: var(--template-flexbox-item-width);
    flex-grow: 0;  /* Prevent growing */
    flex-shrink: 0;  /* Prevent shrinking */
    margin: 0; /* Remove any margin */
    padding: 0; /* Remove padding */
    line-height: 1; /* Ensure no extra vertical space */
}

/* Ensure full width if span is equal to columns */
.template-flexbox-item[style*="--template-flexbox-item-span: var(--template-flexbox-columns)"] {
    flex-basis: 100% !important;
}

/* Media query for different screen sizes */
@media (max-width: 1120px) {
    .template-flexbox {
        --template-flexbox-columns: 2 !important;
    }
}

@media (max-width: 640px) {
    .template-flexbox {
        --template-flexbox-columns: 1 !important;
    }
}