Understanding The Main and Cross Axes in Flexbox

Flexbox is a recently introduced CSS layout pattern that has eased how developers structure HTML elements on a website since its inception. It adopts a 12-column spacing layout that allows efficient space management on a webpage. If you're newly starting with flex, you may not be familiar with its 12 different properties. Although the number of flexbox properties seems daunting, you need not memorise everything. You only need to understand a significant subset of the CSS flexbox properties and have a basic knowledge of the rest, especially the factors influencing their behaviours.
Flexbox main and cross axes are critical factors defining the behaviour of many flexbox properties. In this article, you'll learn about flexbox's main and cross axes and how they manipulate some flexbox properties behaviours.

The Main and Cross Axes

Unlike in the algebra class where the main and cross axes (also, x and y or abscissa and ordinate axes) have permanently defined positions, they behave differently in CSS flexbox. The main and cross axes depend on the flexbox flex-direction property, which determines the flow of the flex items. By default, the flex-direction is set to row, causing the main axis to be on the "algebraic" x-axis and the cross axis to be on the "algebraic" y-axis. The axes remain the same if the flex-direction is set to row-reverse. However, if the flex-direction is changed to column or column-reverse, the flexbox main and cross axes reverse positions—the main axis becomes the "algebraic" y-axis, and the cross axis becomes the "algebraic" x-axis. The main axis always aligns with the flex-direction while the cross axis is perpendicular.
The change in the positions of these axes affects the styles a number of the flexbox properties apply to their flex items. Let's examine these flexbox properties and how their styling natures are impacted.

Justify-content

justify-content is a flexbox container property that aligns flex items along the main axis. Many articles on flex are guilty of describing this property as one that aligns flex items "horizontally". This description is wrong as justify-content can also align items vertically. It all depends on the current position of the main axis. If the flex-direction is set to either row or row-reverse, justify-content will align the items horizontally.

Contrarily, if flex-direction is set to either column or column-reverse, it will align the items vertically as the main axis is already vertical or the y-axis.
Change the flex-direction to column or column-reverse to see this effect.

Align-items

align-items is similar to justify-content, but it aligns flexbox items along the cross axis instead. Contrary to other technical articles on flexbox, it neither aligns articles vertically nor horizontally. Instead, align-items aligns with the cross axis position, dictated by the flex-direction. With a flex-direction value of row or row-reverse, align-items aligns flex items vertically, and horizontally for values of column or column-reverse.

Change the flex-direction value to see the items aligned on the x- or y-axis.

Align-content

align-content is a slightly different flexbox property as it seems opposite to the standard main and cross axes flow. It works only on flexbox containers with a flex-wrap property set to wrap. align-content controls flex row spacing along the cross axis. According to w3schools.com, it aligns flex lines (spaces between wrapped flex items.).
Similar to the behaviour of mentioned flexbox properties, the flex lines could be vertical or horizontal, depending on the position of the cross axis, which further relies on flex-direction values. Suppose the flex-direction value is row or row-reverse, the cross axis will be on the "algebraic" y-axis, the flex lines will be horizontal, and the wrapped flex items will be positioned horizontally. On the other hand, the flex lines will be vertical, and align-content will arrange the wrapped flex items vertically.

Align-self

align-self is another flexbox property that the cross axis position influences. Unlike the first three named properties, it is a flex item property and does not affect flex containers. It controls how flex items are aligned along the cross axis, and if defined, it overrides the align-items flex container property acting on the element on which it is defined. By default, align-self is set to stretch, allowing each flex item to extend to the height of the tallest flex item in the container if no height is specified. When you change the value of align-self to any value other than stretch, the flex item's height reduces to the height of its content. The flex item gets an ideal invisible container with a height similar to other flex items without an align-self property. It positions the aligned item within the container in line with the values assigned to align-self—center, flex-start, or flex-end.
The flex item with an align-self property is positioned horizontally if the flex-direction is set to row or row-reverse and the cross axis is on the x-axis. Otherwise, if the flex-direction is set to column or column-reverse and the cross-axis is on the y-axis, it is positioned vertically.

Tweak the flex-direction values to see the position change in line with the cross axis.

Conclusion

Flexbox is an essential layout concept to know, and what is more important is understanding how its properties work along the main and cross axes and how these axes behave. In this article, you have learnt the four CSS flexbox properties influenced by the main and cross axes positions and how they behave respectively to the axes' position changes. You can learn about other flex and grid layout properties to further improve your layout skills and apply them to your projects.

Reach out to me with Twitter if you need help on web development or technical writing.