Understanding Flexbox

All components in React Native are flex containers and are positioned relatively. In CSS, you would express the default stylesheet, as shown in the following code snippet:

* { 
  display: flex; 
  position: relative; 
} 

In React Native, there are no alternative display values. In fact, display isn't even a valid style property. And, because everything is set as a relative position container, you can assume that any element positioned as absolute will always be relative to its immediate parent.

Flexbox can be thought of as relationship between the container and its immediate children. The container can align items either horizontally or vertically. In CSS, the default flex-direction is set to 'row'. You can change that value to 'column' and flex items will be stacked vertically. In React Native, you express this with the style property flexDirection. However, unlike the Web, the default direction is set to 'column' and can be changed to 'row'. The...