HTML
<!-- Created by Chris C. -->
<!--justify example-->
<div id="container">
<p>justify-content: flex-start</p>
<div id="flex-start">
<div></div>
<div></div>
<div></div>
</div>
<p>justify-content: flex-end</p>
<div id="flex-end">
<div></div>
<div></div>
<div></div>
</div>
<p>justify-content: center</p>
<div id="center">
<div></div>
<div></div>
<div></div>
</div>
<p>justify-content: space-between</p>
<div id="space-between">
<div></div>
<div></div>
<div></div>
</div>
<p>justify-content: space-around</p>
<div id="space-around">
<div></div>
<div></div>
<div></div>
</div>
<p>justify-content: space-evenly</p>
<div id="space-evenly">
<div></div>
<div></div>
<div></div>
</div>
</div>
CSS
/* Created by Chris C. */
#container > div {
display: flex;
font-family: "Courier New", "Lucida Console", monospace;
}
#container > div > div {
width: 50px;
height: 50px;
background: linear-gradient(-45deg, blue, yellow);
}
#flex-start {
justify-content: flex-start;
}
#center {
justify-content: center;
}
#flex-end {
justify-content: flex-end;
}
#space-between {
justify-content: space-between;
}
#space-around {
justify-content: space-around;
}
#space-evenly {
justify-content: center;
}
JS
Resources