flexbox space between

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    }

1justify-content: space-between;

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;}

1/* Flex */
2.anyclass {
3	display:flex;
4}
5/* row is the Default, if you want to change choose */
6.anyclass {
7	display:flex;
8 	flex-direction: row | row-reverse | column | column-reverse;
9}
10
11.anyclass {
12  /* Alignment along the main axis */
13  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
14}

1.container {
2  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
3}