<![CDATA[<!DOCTYPE HTML>
<html>
<head>
<title>flexbox-alignment.html</title>
<style type = "text/css">
div { border-weight: 10px;
border: thick solid;
width: 25rem;
height: 25rem;}
.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;}
.container2 {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: flex-end;}
.container3 {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;}
.container4 {
display: flex;
flex-direction: row;
justify-content: space-between;}
.container5 {
display: flex;
flex-direction: row;
justify-content: space-around;}
.container6 {
display: flex;
flex-direction: row;
justify-content: space-evenly; }
.container7 {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: baseline; }
.special {
font-size: 20pt; }
</style>
</head>
<body>
<p>Flex Start</p>
<div class = "container">
<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>
<p>Flex End</p>
<div class = "container2">
<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>
<p>Center</p>
<div class = "container3">
<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>
<p>Space Between</p>
<div class = "container4">
<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>
<p>Space Around</p>
<div class = "container5">
<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>
<p>Space Evenly</p>
<div class = "container6">
<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>
<p>Baseline</p>
<div class = "container7">
<div class = "item item-1 special">Item 1</div>
<div class = "item item-2">Item 2</div>
<div class = "item item-3">Item 3</div>
</div>
</body>
<html>
]]>