Module:Flex columns/sandbox/styles.css

/* edit summary for the main module: invert media queries, remove float fallback as flex is well-supported by all MediaWiki-supported browsers, add gap using @supports fallback to padding and large note to go with it, remove unnecessary box-sizing */

/* [[Category:CSS from Wikimedia]] */
/* [[Category:Module CSS pages]] */

/* I wonder why this clears, also seems suspect for a general flex-columns
 * module, see below >div selector rules
 */
.flex-columns-container {
	clear: both;
}

.flex-columns-container > .flex-columns-column {
	display: flex;
	flex-direction: column;
}

/* TODO: these two rules seem suspect for a general flex-columns module and
 * should be moved to some portal-specific variant probably
 * also would need to remove the rule declaring the columns to be display: flex
 * and their associated flex-direction
 */
.flex-columns-container > .flex-columns-column > div {
	flex: 1 0 auto;
}

.flex-columns-container > .flex-columns-column > div.flex-columns-noflex {
	flex: 0;
}

/* the padding in the @supports not case really should just categorically be
 * `gap` rules because having more than two columns flexing isn't pretty
 * with the padding version. however, flex `gap` was released in 2018 for
 * Firefox and 2020 for everyone else, so it's fairly new. honestly kind of
 * surprised that css-sanitizer doesn't yell about it. some percent of browsers
 * (~1.5% pageviews total) right now for the targeted environment (desktop) of
 * these rules will interpret this as `gap` for grid, so they will have no
 * padding and no flex `gap`. seems like a reasonable tradeoff
 * TODO: remove @supports at-rule sometime in 2023 or 2024 when a more
 * significant ratio of viewing browsers support `gap` in flex
 */
@supports (gap: 1em) {
	@media screen and (min-width: 720px) {
		.flex-columns-container {
			gap: 1em;
		}
	}
}

@supports not (gap: 1em) {
	@media screen and (min-width: 720px) {
		.flex-columns-container > .flex-columns-column {
			padding: 0 0.5em;
		}
	
		.flex-columns-container > .flex-columns-column:first-child {
			padding-left: 0;
		}
	
		.flex-columns-container > .flex-columns-column:last-child {
			padding-right: 0;
		}
	}
}

@media screen and (min-width: 720px) {
	.flex-columns-container {
		display: flex;
		flex-wrap: wrap;
	}
	
	.flex-columns-container > .flex-columns-column {
		flex: 1;
		min-width: 360px;
	}
}