butterfly/kb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
981fd04123
kb/data/developer.mozilla.org/en-US/docs/Glossary/Main_Axis-0.md

12 KiB
Raw Blame History

title chunk source category tags date_saved instance
Main axis - Glossary | MDN 1/3 https://developer.mozilla.org/en-US/docs/Glossary/Main_Axis reference web, html, css, javascript, documentation 2026-05-05T05:37:17.626250+00:00 kb-cron

MDN HTML HTML: Markup language

HTML reference

HTML guides

Markup languages

CSS CSS: Styling language

CSS reference

CSS guides

Layout cookbook

JavaScriptJS JavaScript: Scripting language

JS reference

JS guides

Web APIs Web APIs: Programming interfaces

Web API reference

Web API guides

All All web technology

Technologies

Topics

Learn Learn web development

Frontend developer course

Learn HTML

Learn CSS

Learn JavaScript

Tools Discover our tools

About Get to know MDN better

Blog

  1. Glossary
  2. Main axis

Main axis

The main axis in flexbox is defined by the direction set by the flex-direction property. There are four possible values for flex-direction. These are:

  • row
  • row-reverse
  • column
  • column-reverse

Should you choose row or row-reverse then your main axis will run along the row in the inline direction. In this image the flex-direction is row which forms the main axis Choose column or column-reverse and your main axis will run top to bottom of the page in the block direction. Three flex items taking up the full width of the container, displayed one below the other in code order. Flex-direction is set to column. The main axis is vertical i.e., from top to bottom On the main axis you can control the sizing of flex items by adding any available space to the items themselves, by way of flex properties on the items. Or, you can control the space between and around items by using the justify-content property.

In this article

See also

Property reference

Further reading