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

Code Example 1

.item {
  align-self:flex-start | flex-end | center | baseline | stretch;
}

Code Example 2

Display: flex 
Flex-direction: row | row-reverse | column | column-reverse
align-self: flex-start | flex-end | center | baseline | stretch
justify-content: start |  center | space-between | space-around | space-evenly

Code Example 3

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

Code Example 4

.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