Is there a cross-axis counterpart to the "flex-grow" property (or "flex"), which affects only the main-axis?

Question

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?

Answer 1

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.