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

Code Example 1

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

Code Example 2

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

Code Example 3

/* 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 4

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

Code Example 5

.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.

Code Example 6

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
<style>
  .flex-container {
  display: flex; // default: flow
  flex-direction: column; // elements in a column
}
</style>

Learn ReactJs, React Native from akashmittal.com