Flex 05

by kmouse

HTML

<h1>height, rows</h1>
<div class="flex wrap height">
	<div>Hello<br/>world!<br/>More<br/>Text</div><div>More Text</div>
	<div>Hello world!</div><div>More Text</div>
</div>
<div class="flex height">
	<div>Hello world!</div><div>More Text</div>
</div>
<h1>height, columns</h1>
<div class="flex column wrap height">
	<div>Hello<br/>world!<br/>More<br/>Text</div><div>More Text</div>
	<div>Hello world!</div><div>More Text</div>
</div>
<div class="flex column height">
	<div>Hello<br/>world!</div><div>More<br/>Text</div>
</div>
<h1>min-height, rows</h1>
<div class="flex wrap min-height">
	<div>Hello world!</div>
</div>
<div class="flex min-height">
	<div>Hello world!</div>
</div>
<h1>min-height, columns</h1>
<div class="flex column wrap min-height">
	<div>Hello world!</div>
</div>
<div class="flex column min-height">
	<div>Hello world!</div>
</div>
<h1>max-height, rows</h1>
<div class="flex wrap max-height">
	<div>Hello<br/>world!<br/>More<br/>Text</div>
</div>
<div class="flex max-height">
	<div>Hello<br/>world!<br/>More<br/>Text</div>
</div>
<h1>max-height, columns</h1>
<div class="flex column wrap max-height">
	<div>Hello<br/>world!<br/>More<br/>Text</div><div>More<br/>Text</div>
	<div>Hello<br/>world!</div><div>More<br/>Text</div>
</div>
<div class="flex column max-height">
	<div>Hello<br/>world!</div><div>More<br/>Text</div>
</div>

CSS

body, h1 { font-size: 15px; }
h1 {
	text-align: center;
	margin-bottom: 5px;
	padding: 0.25em 0;
	border-color: #333;
	border-style: solid;
	border-width: 1px 0;
}
h1:first-child { margin-top: 0; }
h1, h2 { white-space: nowrap; }
.flex {
	display: flex;
	margin: 1px 0 3px;
	border: 1px solid #999;
	overflow: hidden;
	justify-content: space-around;
	align-items: flex-start;
}
.flex > div {
	border: 2px solid #d66;
	background: #fff;
	text-align: center;
}
.wrap {
	flex-wrap: wrap;
}
.column {
	flex-direction: column;
}
.height {
	height: 40px;
}
.min-height {
	min-height: 40px;
}
.max-height {
	max-height: 40px;
}