Jump to content

Module:Flex columns/styles.css

From Wikipedia, the free encyclopedia
This is an old revision of this page, as edited by Dreamy Jazz (talk | contribs) at 18:44, 9 September 2018 (when the screen is less than 383px, the flex columns are going beyond their allowed space. Also add code so that flex columns stops at 720px completely). The present address (URL) is a permanent link to this revision, which may differ significantly from the current revision.
.flex-columns-container {
	clear:both;
	width:100%;
	display: flex;
	flex-wrap: wrap;
}
.flex-columns-container > .flex-columns-column {
	float: left;
	width: 50%;
	min-width: 360px;
	padding: 0 0.5em;
	box-sizing: border-box;
	flex: 1;
	display: flex;
	flex-direction: column;
}
@media screen and (max-width: 393px) {
	.flex-columns-container > .flex-columns-column {
		min-width: 0;
	}
}
.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 (max-width: 720px) {
	.flex-columns-container > .flex-columns-column {
		padding: 0;
		width: 100%;
	}
	.flex-columns-container {
		display:block;
	}
}
.flex-columns-container > .flex-columns-column > div {
	flex: 1 0 auto;
}
.flex-columns-container > .flex-columns-column > div.flex-columns-noflex {
	flex: 0;
}