Flex 04

by kmouse

HTML

<h1>flex: <em>default value</em> (0 1 auto)</h1>
<div class="wrapper">
  <h2>flex-wrap: wrap</h2>
  <div class="flex">
    <div>Hello</div>
    <div>big world!</div>
    <div>LOOOOOOOOOOOOOOOOOOOOONG</div>
  </div>
  <h2>flex-wrap: nowrap</h2>
  <div class="flex nowrap">
    <div>Hello</div>
    <div>big world!</div>
    <div>LOOOOOOOOOOOOOOOOOOOOONG</div>
  </div>
</div>
<h1>flex: auto (1 1 auto)</h1>
<div class="wrapper">
  <h2>flex-wrap: wrap</h2>
  <div class="flex auto">
    <div>Hello</div>
    <div>big world!</div>
    <div>LOOOOOOOOOOOOOOOOOOOOONG</div>
  </div>
  <h2>flex-wrap: nowrap</h2>
  <div class="flex nowrap auto">
    <div>Hello</div>
    <div>big world!</div>
    <div>LOOOOOOOOOOOOOOOOOOOOONG</div>
  </div>
</div>
<h1>flex: none (0 0 auto)</h1>
<div class="wrapper">
  <h2>flex-wrap: wrap</h2>
  <div class="flex none">
    <div>Hello</div>
    <div>big world!</div>
    <div>LOOOOOOOOOOOOOOOOOOOOONG</div>
  </div>
  <h2>flex-wrap: nowrap</h2>
  <div class="flex nowrap none">
    <div>Hello</div>
    <div>big world!</div>
    <div>LOOOOOOOOOOOOOOOOOOOOONG</div>
  </div>
</div>
<h1>flex: 1 (1 1 0)</h1>
<div class="wrapper">
  <h2>flex-wrap: wrap</h2>
  <div class="flex number">
    <div>Hello</div>
    <div>big world!</div>
    <div>LOOOOOOOOOOOOOOOOOOOOONG</div>
  </div>
  <h2>flex-wrap: nowrap</h2>
  <div class="flex nowrap number">
    <div>Hello</div>
    <div>big world!</div>
    <div>LOOOOOOOOOOOOOOOOOOOOONG</div>
  </div>
</div>

CSS

h1 {
	text-align: center;
	margin-bottom: 5px;
	padding: 0.25em 0;
	border-color: #aaa;
	border-width: 1px 0;
	font-size: 16px;
}
h2 {font-size: 15px; }
h1:first-child { margin-top: 0; }
h1, h2 { white-space: nowrap; }
.flex {
	display: flex;
	margin: 3px 0 7px;
	border: 2px solid #333;
	overflow: hidden;
	justify-content: space-around;
	align-items: flex-end;
	flex-wrap: wrap;
	flex-direction: row;
}
.flex > div {
	border: 2px solid #d66;
	background: #fff;
	text-align: center;
}
.flex.nowrap {
	flex-wrap: nowrap;
}
.flex.auto > div {
	flex: 1 1 auto;
}
.flex.none > div {
	flex: none;
}
.flex.number > div {
	flex: 1;
}
.wrapper {
	min-height: 165px;
}