flex justify content

1//You have to give an automatic margin to all the items inside the flex.
2.flexbox {
3       display: flex;
4       justify-content:  space-between;
5    }
6    
7    .flex-item {
8       margin: auto;
9    }

1Diffrient types of justify-content properties in CSS:
21)normal : "Normal-alignment."
32)space-between :  "Distribute items evenly The first item is flush with the
4"start,the last is flush with the end."
53)space-around : "Distribute items evenly Items have a half-size space.
64)space-evenly : "Distribute items evenly Items have equal space around them.
75)stretch : "Distribute items evenly Stretch 'auto'-sized items to fit.
86)center : "Pack items around the center
97)flex-start : "Pack flex items from the start 
108)flex-end :   "Pack flex items from the end
119)more... ('upvote please!')

1justify-content: space-between;

1/* Positional alignment */
2justify-content: center;     /* Pack items around the center */
3justify-content: start;      /* Pack items from the start */
4justify-content: end;        /* Pack items from the end */
5justify-content: flex-start; /* Pack flex items from the start */
6justify-content: flex-end;   /* Pack flex items from the end */
7justify-content: left;       /* Pack items from the left */
8justify-content: right;      /* Pack items from the right */
9
10/* Baseline alignment */
11/* justify-content does not take baseline values */
12
13/* Normal alignment */
14justify-content: normal;
15
16/* Distributed alignment */
17justify-content: space-between; /* Distribute items evenly
18                                   The first item is flush with the start,
19                                   the last is flush with the end */
20justify-content: space-around;  /* Distribute items evenly
21                                   Items have a half-size space
22                                   on either end */
23justify-content: space-evenly;  /* Distribute items evenly
24                                   Items have equal space around them */
25justify-content: stretch;       /* Distribute items evenly
26                                   Stretch 'auto'-sized items to fit
27                                   the container */
28
29/* Overflow alignment */
30justify-content: safe center;
31justify-content: unsafe center;
32
33/* Global values */
34justify-content: inherit;
35justify-content: initial;
36justify-content: unset;

1justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly

1.upper
2{
3  margin:30px;
4  display:flex;
5  flex-direction:row;
6  width:300px;
7  height:80px;
8  border:1px red solid;
9
10  padding:5px; /* this */
11}
12
13.upper > div
14{
15  flex:1 1 auto;
16  border:1px red solid;
17  text-align:center;
18
19  margin:5px;  /* and that, will result in a 10px gap */
20}
21
22.upper.mc /* multicol test */
23{flex-direction:column;flex-wrap:wrap;width:200px;height:200px;}