kb/data/developer.mozilla.org/en-US/docs/Glossary/Cross_Axis-0.md

title	chunk	source	category	tags	date_saved	instance
Cross Axis - Glossary | MDN	1/3	https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis	reference	web, html, css, javascript, documentation	2026-05-05T05:28:47.387323+00:00	kb-cron

• Skip to main content
• Skip to search

MDN HTML HTML: Markup language

HTML reference

• Elements
• Global attributes
• Attributes
• See all…

HTML guides

• Responsive images
• HTML cheatsheet
• Date & time formats
• See all…

Markup languages

• SVG
• MathML
• XML

CSS CSS: Styling language

CSS reference

• Properties
• Selectors
• At-rules
• Values
• See all…

CSS guides

• Box model
• Animations
• Flexbox
• Colors
• See all…

Layout cookbook

• Column layouts
• Centering an element
• Card component
• See all…

JavaScriptJS JavaScript: Scripting language

JS reference

• Standard built-in objects
• Expressions & operators
• Statements & declarations
• Functions
• See all…

JS guides

• Control flow & error handing
• Loops and iteration
• Working with objects
• Using classes
• See all…

Web APIs Web APIs: Programming interfaces

Web API reference

• File system API
• Fetch API
• Geolocation API
• HTML DOM API
• Push API
• Service worker API
• See all…

Web API guides

• Using the Web animation API
• Using the Fetch API
• Working with the History API
• Using the Web speech API
• Using web workers

All All web technology

Technologies

• Accessibility
• HTTP
• URI
• Web extensions
• WebAssembly
• WebDriver
• See all…

Topics

• Media
• Performance
• Privacy
• Security
• Progressive web apps

Learn Learn web development

Frontend developer course

• Getting started modules
• Core modules
• MDN Curriculum
• Check out the video course from Scrimba, our partner

Learn HTML

• Structuring content with HTML module

Learn CSS

• CSS styling basics module
• CSS layout module

Learn JavaScript

• Dynamic scripting with JavaScript module

Tools Discover our tools

• Playground

• HTTP Observatory

• Border-image generator

• Border-radius generator

• Box-shadow generator

• Color format converter

• Color mixer

• Shape generator

About Get to know MDN better

• About MDN

• Advertise with us

• Community

• MDN on GitHub

Blog

1. Glossary
2. Cross Axis

Cross Axis

The cross axis in flexbox runs perpendicular to the main axis, therefore if your flex-direction is either row or row-reverse then the cross axis runs down the columns. If your main axis is column or column-reverse then the cross axis runs along the rows. Alignment of items on the cross axis is achieved with the align-items property on the flex container or align-self property on individual items. In the case of a multi-line flex container, with additional space on the cross axis, you can use align-content to control the spacing of the rows.

In this article

• See also

See also

Property reference

• align-content
• align-items
• align-self
• flex-wrap
• flex-direction
• flex
• flex-basis
• flex-flow
• flex-grow
• flex-shrink
• justify-content
• order

Further reading

CSS flexbox guides:

• Basic concepts of flexbox
• Aligning items in a flex container
• Mastering wrapping of flex items
• Related glossary terms:
  • Flex
  • Flex Container
  • Flex Item
  • Grid