> For the complete documentation index, see [llms.txt](https://irena-popova.gitbook.io/flexbox/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://irena-popova.gitbook.io/flexbox/flexbox-axes.md). # Flexbox Axes ## Flexbox Axes Flexbox operates in a 2 axes system: a main and a cross axis. The main axis is your defining direction of how your flex items are placed in the flex container. Determining the cross axis is very simple, it's in the direction that's perpendicular to your main axis. Remember in math class, we were taught **x** and **y** axis. Well, throw that out. Because the main axis can be horizontal or vertical. The **x** axis is not always the main axis. A flexbox container has two axes: * main axis * cross axis The main axis is determined by the value of the flex-direction property. The main axis can go in these directions: * left to right ``` flex-direction: row ``` * right to left ``` flex-direction: row-reverse ``` * top to bottom ``` flex-direction: column ``` * bottom to top ``` flex-direction: column-reverse ``` The cross axis on the other side will be always perpendicular to the main axis. Take a look at the image below. This shows how the main axis is determined according to the different values of the flex-direction property.