This defines the alignment along the main axis and cross-axis. It helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.
<div class="container top-left"> <div class="basis1"> ... </div> </div>
<div class="container top-center"> <div class="basis1"> ... </div> </div>
<div class="container top-right"> <div class="basis1"> ... </div> </div>
<div class="container center-left"> <div class="basis1"> ... </div> </div>
<div class="container center-center"> <div class="basis1"> ... </div> </div>
<div class="container center-right"> <div class="basis1"> ... </div> </div>
<div class="container bottom-left"> <div class="basis1"> ... </div> </div>
<div class="container bottom-center"> <div class="basis1"> ... </div> </div>
<div class="container bottom-right"> <div class="basis1"> ... </div> </div>
<div class="container space-between-top"> <div class="basis1"> ... </div> <div class="basis1"> ... </div> </div>
<div class="container space-between-center"> <div class="basis1"> ... </div> <div class="basis1"> ... </div> </div>
<div class="container space-between-bottom"> <div class="basis1"> ... </div> <div class="basis1"> ... </div> </div>
<div class="container space-around-top"> <div class="basis1"> ... </div> <div class="basis1"> ... </div> <div class="basis1"> ... </div> </div>
<div class="container space-around-center"> <div class="basis1"> ... </div> <div class="basis1"> ... </div> <div class="basis1"> ... </div> </div>
<div class="container space-around-bottom"> <div class="basis1"> ... </div> <div class="basis1"> ... </div> <div class="basis1"> ... </div> </div>