Understanding The Concept Of Flexbox In React Native
- By Harikrishna Kundariya
Flexbox in React Native
Flexbox serves the function of providing consistent layouts on varied screen sizes. It works in the same manner in React Native like the way it does in CSS for the web. However, it has some differences.
It will direct how our flex items will fill over the available space in relation to the Axis. It would direct component to change its dimensions to fill the space of the container it is in. Flex property will be kept in mind while dividing and allocating the space.
There is a concept of relation in Flex layout. There is a parent element which contains the child elements nestled in it. This parent element is called Flex container.
The children elements which are nestled in the main container are called the Flex items.
Flex container arranges all children elements in a horizontal manner by default. The reason for this is CSS flex-direction property which has the initial value ‘row’. This property follows the direction of the Main Axis in the container. As a result, the children elements follow the parent container’s direction. Hence, the change in direction would apply to the Main Axis and in turn, to the parent and the child elements.
Let’s look at an example. We have four children elements which are differentiated using different colors. Below are the proportions in which they are arranged:
▪ Light Blue view uses flex:1.
▪ Orange view uses flex:2.
▪ Purple view uses flex:3.
▪ Grey (white,Background1,darker50%) view uses flex:4.
As it can be seen that light blue, orange, purple and grey gets1/10, 2/10, 3/10 and 4/10 of the space respectively.
It will decide the direction in which the children elements will be laid out. There are two axis which we have to know:
▪ Main Axis (Flex Direction)
▪ Cross Axis (perpendicular axis to the main axis)
The ways in which the arrangement can take place, are descried below:
When children elements are arranged from left, it is called the ‘Row’ arrangement. It goes from left to right as shown in Figure 4.
Similar types of results can be obtained from various arrangements.
When the children elements are arranged from top, it is called the ‘Column’ arrangement. It goes from top to bottom as shown in Figure 5.
When children elements are arranged from right, it is called the ‘Row-Reverse’ arrangement. It goes from right to left as shown in Figure 6.
When children elements are arranged from bottom, it is called the ‘Column-Reverse’ arrangement. It goes from bottom to top as shown in Figure 7.
Justify Content determines how the children would align along the Main Axis. Below are ways in which this can be done:
Children elements are aligned to the start of the Main Axis of a container as shown in Figure 8.
Children elements are aligned to the center of the Main Axis of a container as shown in Figure 9.
Children elements are aligned to the end of the Main Axis of a container as shown in Figure 10.
Children elements are evenly spaced across the container's Main Axis. It would distribute the leftover space between the children elements as shown in figure 11.
Children elements are evenly spaced across the container's Main Axis. It would distribute the leftover space between the children elements. However, there is a major difference between Space-Between and Space-Around. In Space-Around there is space distributed before the beginning of the first child and after the end of the last child as shown in figure 12.
This function directs how children should be aligned along the Cross Axis of their container. The major difference between Align items and Justify Content is in the latter alignment is along the Main Axis whereas in the former it is along the Cross Axis.
Below are the different ways in which the items can be aligned:
Children elements are aligned to the start of the Cross Axis of a container.
Children elements are aligned to the center of the Cross Axis of a container.
Children elements are aligned to the end of the Cross Axis of a container.
It would be the default value. Children elements are stretched to match the height of the Cross Axis of a container
Children elements are aligned along a common baseline.
When we want to apply the impact to single child instead of all the children within a container, you can apply alignself to it to change its alignment within its container. It has the same options and effects as Align Items.
There are options of aligning the content which would describe the distribution of lines along the Cross Axis. However, it would only have effect when items are wrapped to more than one lines using flexWrap. The options are similar to what we had in Align Items.
Thus, there are various possibilities of alignments using Flex in React Native.