flex layouts justify-content

Disclaimer: This article is a blogger original article, shall not be reproduced without the bloggers allowed.
justify-content has five values, namely: flex-start, flex-end , center, space-around, space-between

<div class="flex-start">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>
    <div class="flex-end">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>
    <div class="center">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>
    <div class="space-around">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>
    <div class="space-between">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>

css is:

.flex-start {
     display: flex;
     justify-content: flex-start;
 }
 .flex-start div {
     width: 200px;
     height: 200px;
     background: pink;
     margin: 10px;
 }
 .flex-end {
     display: flex;
     justify-content: flex-end;
 }
 .flex-end div {
     width: 200px;
     height: 200px;
     background: pink;
     margin: 10px;
 }
 .center {
     display: flex;
     justify-content: center;
 }
 .center div {
     width: 200px;
     height: 200px;
     background: pink;
     margin: 10px;
 }
 .space-around {
     display: flex;
     justify-content: space-around;
 }
 .space-around div {
     width: 200px;
     height: 200px;
     background: pink;
     margin: 10px;
 }
 .space-between {
     display: flex;
     justify-content: space-between;
 }
 .space-between div {
     width: 200px;
     height: 200px;
     background: pink;
     margin: 10px;
 }

Results are as follows: