<![CDATA[<!DOCTYPE HTML>
<html>
<head>
<title>flexbox-wrap.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;}
.c1 { flex-wrap: none; }
.c2 { flex-wrap: wrap; }
.c3 { flex-wrap: wrap;
align-content: center;}
.c4 { flex-wrap: wrap;
align-content: space-between;}
.c5 { flex-wrap: wrap;
align-content: space-around;}
.c6 { flex-wrap: wrap;
align-content: space-evenly;}
.c7 { flex-wrap: wrap;
align-content: space-evenly;
gap: .5rem;}
</style>
</head>
<body>
<p>No Wrap</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 class = "item item-5">Item 5</div>
<div class = "item item-6">Item 6</div>
<div class = "item item-7">Item 7</div>
<div class = "item item-8">Item 8</div>
</div>
<p>Wrap</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 class = "item item-5">Item 5</div>
<div class = "item item-6">Item 6</div>
<div class = "item item-7">Item 7</div>
<div class = "item item-8">Item 8</div>
</div>
<p>Wrap w/ Center Align-Content</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 class = "item item-5">Item 5</div>
<div class = "item item-6">Item 6</div>
<div class = "item item-7">Item 7</div>
<div class = "item item-8">Item 8</div>
</div>
<p>Wrap w/ Space Between Align-Content</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 class = "item item-5">Item 5</div>
<div class = "item item-6">Item 6</div>
<div class = "item item-7">Item 7</div>
<div class = "item item-8">Item 8</div>
</div>
<p>Wrap w/ Space Around Align-Content</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 class = "item item-5">Item 5</div>
<div class = "item item-6">Item 6</div>
<div class = "item item-7">Item 7</div>
<div class = "item item-8">Item 8</div>
</div>
<p>Wrap w/ Space Evenly Align-Content</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 class = "item item-6">Item 6</div>
<div class = "item item-7">Item 7</div>
<div class = "item item-8">Item 8</div>
</div>
<p>Wrap w/ Space Evenly Align-Content & 0.5 rem gap</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 class = "item item-6">Item 6</div>
<div class = "item item-7">Item 7</div>
<div class = "item item-8">Item 8</div>
</div>
</body>
<html>
]]>