Module:Flexbox/styles.css: Difference between revisions

Revision as of 15:00, 28 December 2024

.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;
	flex: var(--template-flexbox-item-span);
}

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

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