<![CDATA[<!DOCTYPE HTML>
<html>
<head>
<title>flexbox-child-properties.html</title>
<style type = "text/css">
div { border: thick solid;
width: 90%;
height: 90%; }
.item { border-color: red;
background-color: pink;
width: 5rem;
height: 5rem; }
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start; }
.c1 .item-1 { flex-grow: 1; }
.c2 .item-3 { flex-grow: 1; }
.c3 .item-1, .c3 .item-2
{ flex-grow: 1; }
.c4 .item { flex-grow: 1; }
.c5 .item-1 { flex-grow: 2; }
.c5 .item-2 { flex-grow: 4; }
.c5 .item-3, .c5 .item-4
{ flex-grow: 1; }
.c6 .item-1 { flex-shrink: 5; }
.c7 .item-1 { flex-shrink: 10; }
.c7 .item-2 { flex-shrink: 8; }
.c7 .item-3 { flex-shrink: 6; }
.c7 .item-4 { flex-shrink: 4; }
.c7 .item-5 { flex-shrink: 2; }
.c8 .item-1 { flex-basis: 10rem; }
/* shorthand way to set flex-grow, flex-shrink, and/or flex-basis all in one line */
.c9 .item-1 { flex: 1; }
.c9 .item-2 { flex: 0 1; }
.c9 .item-3 { flex: 0 0 10rem; }
.c10 { height: 25rem; }
.c10 .item-3 { align-self: center; }
/* Items 2 and 4 are 0 by default */
.c11 .item-1 { order: 10; }
.c11 .item-2 { order: 5; }
.c11 .item-5 { order: -2; }
.c11 .item-3 { order: -1; }
</style>
</head>
<body>
<p>Item 1 w/ flex-grow 1</p>
<div class = "container c1">
<div class = "item item-1">Item 1</div>
<div class = "item item-2">Item 2</div>
<div class = "item item-3">Item 3</div>
<div class = "item item-4">Item 4</div>
</div>
<p>Item 3 w/ flex-grow 1</p>
<div class = "container c2">
<div class = "item item-1">Item 1</div>
<div class = "item item-2">Item 2</div>
<div class = "item item-3">Item 3</div>
<div class = "item item-4">Item 4</div>
</div>
<p>Item 1 & 2 w/ flex-grow 1</p>
<div class = "container c3">
<div class = "item item-1">Item 1</div>
<div class = "item item-2">Item 2</div>
<div class = "item item-3">Item 3</div>
<div class = "item item-4">Item 4</div>
</div>
<p>All Items w/ flex-grow 1</p>
<div class = "container c4">
<div class = "item item-1">Item 1</div>
<div class = "item item-2">Item 2</div>
<div class = "item item-3">Item 3</div>
<div class = "item item-4">Item 4</div>
</div>
<p>Item 1 w/ flex-grow 2, Item 2 w/ flex-grow 4, Item 3 & 4 w/ flex-grow 1</p>
<div class = "container c5">
<div class = "item item-1">Item 1</div>
<div class = "item item-2">Item 2</div>
<div class = "item item-3">Item 3</div>
<div class = "item item-4">Item 4</div>
</div>
<p>Item 1 w/ flex-shrink 5 (Resize window to see effect)</p>
<div class = "container c6">
<div class = "item item-1">Item 1</div>
<div class = "item item-2">Item 2</div>
<div class = "item item-3">Item 3</div>
<div class = "item item-4">Item 4</div>
<div class = "item item-5">Item 5</div>
</div>
<p>Items w/ Descending flex-shrink values (Resize window to see effect)</p>
<div class = "container c7">
<div class = "item item-1">Item 1</div>
<div class = "item item-2">Item 2</div>
<div class = "item item-3">Item 3</div>
<div class = "item item-4">Item 4</div>
<div class = "item item-5">Item 5</div>
</div>
<p>Item 1 w/ flex-basis of 10rem</p>
<div class = "container c8">
<div class = "item item-1">Item 1</div>
<div class = "item item-2">Item 2</div>
<div class = "item item-3">Item 3</div>
<div class = "item item-4">Item 4</div>
<div class = "item item-5">Item 5</div>
</div>
<p>Item 1 w/ flex-grow 1, Item 2 w/ flex-shrink 1, Item 3 w/ flex-basis 10rem</p>
<div class = "container c9">
<div class = "item item-1">Item 1</div>
<div class = "item item-2">Item 2</div>
<div class = "item item-3">Item 3</div>
<div class = "item item-4">Item 4</div>
<div class = "item item-5">Item 5</div>
</div>
<p>Item 3 with align-self at center</p>
<div class = "container c10">
<div class = "item item-1">Item 1</div>
<div class = "item item-2">Item 2</div>
<div class = "item item-3">Item 3</div>
<div class = "item item-4">Item 4</div>
<div class = "item item-5">Item 5</div>
</div>
<p>Item 1 w/ order 1, Item 3 w/ order -1, Item 5 w/ order -2</p>
<div class = "container c11">
<div class = "item item-1">Item 1</div>
<div class = "item item-2">Item 2</div>
<div class = "item item-3">Item 3</div>
<div class = "item item-4">Item 4</div>
<div class = "item item-5">Item 5</div>
</div>
</body>
<html>
]]>