By default every view in react native uses flexbox.
BY default every view organizes its children in a column.
if we add height and width in the parent view, the child element will align themself along the cross axis by stretching.
eg: if the main axis is row, then all the child element will take the height of the parent and the width has no impact.
So inorder to give width to the child elements, we can use flex property.flex property works along main axis.The default value of
alignItemsis'stretch'.flexDirection- values:row,column,row-reverse,column-reverse.justifyContent(to organize elements along main axis.) - values:center,flex-end,flex-start,space-between,space-aroundalignItems(to organize elements along cross axis.)For child elements.
flex- flex will define how your items are going to “fill” over the available space along your main axis. Space will be divided according to each element's flex property.
Read more about react native flebox
Top comments (0)