Menu
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 you can read online 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?
681
The flex-grow property. The flex-grow property specifies the flex grow factor, which determines how much the flex item will grow relative to the rest of the flex items in the flex container when the positive free space is distributed.
The main axis is defined by the flex-direction property, and the cross axis runs perpendicular to it. Everything we do with flexbox refers back to these axes, so it is worth understanding how they work from the outset.
The flex property is a shorthand property for the flex-grow , flex-shrink , and flex-basis properties.
If you have set flex-direction: row , your main axis is along the row, and your cross axis is down the columns. With flex-direction: column , the main axis is down the column and your cross axis along the rows.
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.
132
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
