In Flexbox there are concepts of "main-axis" and "cross-axis". Generally on a browser the "main-axis" would be horizontal, presumably because desktop and laptop screens are usually in landscape orientation, whereas in React Native, the "main-axis" is generally vertical since it's primarily for phones, which are most often in portrait orientation. Whichever of these is the "main-axis", the other is then known as the "cross-axis".
It seems that also in Flexbox many properties that affect the main-axis have a counterpart with a different name that affects the cross-axis.
There is a property called flex-grow
and another just called flex
that can do the job of flex-grow
and some others at once.
What I'm unclear on is whether this flex-grow
is one of the properties that has a counterpart, or if it's an exception. The same goes for the flex
property.
One reason I ask is that I often read that when trying to get your layout right that you might need to set flex
to 1
for your element and all of its counter/parent elements. But what about where places in your layout need to achieve the same goal, but in the cross-axis?
The flex-grow
(and the shorthand flex
) property always affect the main axis, has no counterpart, and sets how to distribute the free space horizontally for flex row direction and vertically for flex column direction.
In comparison, for example the justify-content
property affects the main axis, has a counterpart, the align-items
which affect the cross axis, where both sets the alignment of the flex items.
What can be confusing here though, is that based on the flow direction they affect either the flex items horizontally or vertically.
Note, the main and cross axis has nothing to do with whether the screen is wide or tall.
It has to do with the flow direction, so for a flex row direction, which is the default, the main axis is horizontal and the cross axis is vertical, and for a flex column direction, the main axis is vertical and the cross axis is horizontal.
A really good article is A Complete Guide to Flexbox, which explains this more thoroughly.