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 */

/* 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; } }