Module:Flexbox/styles.css

/* Flexbox container - default 3 columns layout */
.template-flexbox {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    flex-direction: row;
}

/* Flexbox items - responsive column sizing */
.template-flexbox-item {
    flex-basis: calc(33.333% - 11px);
    flex-grow: 1;
    min-width: 0;
}

/* 2 columns layout variant */
.template-flexbox--columns-2 .template-flexbox-item {
    flex-basis: calc(50% - 8px);
}

/* 1 column layout variant */
.template-flexbox--columns-1 .template-flexbox-item {
    flex-basis: 100%;
}

/* 4 columns layout variant */
.template-flexbox--columns-4 .template-flexbox-item {
    flex-basis: calc(25% - 12px);
}

/* Responsive breakpoints */
@media (max-width: 1120px) {
    .template-flexbox-item {
        flex-basis: calc(50% - 8px);
    }
    
    /* Override for 4-column layouts to become 2-column */
    .template-flexbox--columns-4 .template-flexbox-item {
        flex-basis: calc(50% - 8px);
    }
}

@media (max-width: 640px) {
    .template-flexbox {
        gap: 12px;
    }
    
    .template-flexbox-item {
        flex-basis: 100%;
    }
    
    /* All variants become single column on mobile */
    .template-flexbox--columns-2 .template-flexbox-item,
    .template-flexbox--columns-4 .template-flexbox-item {
        flex-basis: 100%;
    }
}

/* Flexbox vertical layout variant */
.template-flexbox--vertical {
    flex-direction: column;
}

.template-flexbox--vertical .template-flexbox-item {
    flex-basis: auto;
}

/* Flexbox center alignment variants */
.template-flexbox--center {
    justify-content: center;
}

.template-flexbox--center-items {
    align-items: center;
}

/* No gap variant */
.template-flexbox--no-gap {
    gap: 0;
}

.template-flexbox--no-gap .template-flexbox-item {
    flex-basis: 33.333%;
}

.template-flexbox--no-gap.template-flexbox--columns-2 .template-flexbox-item {
    flex-basis: 50%;
}

@media (max-width: 1120px) {
    .template-flexbox--no-gap .template-flexbox-item {
        flex-basis: 50%;
    }
}

@media (max-width: 640px) {
    .template-flexbox--no-gap .template-flexbox-item {
        flex-basis: 100%;
    }
}