Check out example codes for "flexbox". It will help you in understanding the concepts better.

Code Example 1

Flexbox properties:
1.flex-direction
2.flex-wrap
3.flex-flow
4.justify-content
5.align-items
6.align-content

Code Example 2

/* Flex */
.anyclass {
	display:flex;
}
/* row is the Default, if you want to change choose */
.anyclass {
	display:flex;
 	flex-direction: row | row-reverse | column | column-reverse;
}

.anyclass {
  /* Alignment along the main axis */
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

Code Example 3

.container {
  display: flex; /* or inline-flex */
}

Code Example 4

<!--basic--flex--layout-->
<html>
	<head>
		<style>
			.parent{
              display:  flex or inline-flex;
              flex-direction: row  or column;
              flex-wrap: wrap or wrap-reverse;
 			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="child-1"></div>
			.
			.
			.
		</div>
	</body>
</html>

Code Example 5

/* use this if you want to center stuff like in your div */
.flexbox_card {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

Code Example 6

.container {
	display: flex;
}

Anything within the container that is a block level element is
now turned into an inline element only taking up the space of 
its actual content placing all items side by side instead on
individual rows.

Learn ReactJs, React Native from akashmittal.com