Understanding The Main and Cross Axes in Flexbox
Tags: css, webdev, beginners, programming
Published: 2023-06-30 02:24:07

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. 

{% codepen https://codepen.io/drprime01/pen/dyqGvqz %}

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`.

{% codepen https://codepen.io/drprime01/pen/ZEMQKGW %}

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.

{% codepen https://codepen.io/drprime01/pen/WNgrjxe %}

### 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.

{% codepen https://codepen.io/drprime01/pen/ExePmeQ %}

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](https://twitter.com/theDocWhoCodes) if you need help on web development or technical writing.