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

user_527702 0
Viewed 9756

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?

flexbox layout css terminology
2 Answers

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.

user_28278230

If you'd like to modify a flex item in the cross-axis (vertically by default, or horizontally if the flex container has flex-direction: column; set) then consider using the align-self property. To make a flex item "grow" in the cross axis direction, align-self: stretch; on that item should work. This is only useful if the container already has align-items set to something like center.

Note that this is similar to "flex-grow" in the cross axis, but definitely not the same thing. See the complete guide for more details: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.container {
  display: flex;
  background-color: tan;
  align-items: center;
}

.small-stretched-item {
  background-color: green;
  align-self: stretch;
}

.tall-item {
  height: 200px;
  background-color: orange;
 }
 
 .small-unstretched-item {
   background-color: pink;
 }
<div class="container">
  <span class="small-stretched-item">Small, stretched item</span>
  <div class="tall-item">Tall item</div>
  <span class="small-unstretched-item">Small, unstretched item</span>
</div>

user_55514130
Related