ContextQMD
Back to Content

Cross Axis

files/en-us/glossary/cross_axis/index.md

latest1.5 KB
Original Source

The cross axis in {{glossary("flexbox")}} runs perpendicular to the {{glossary("main axis")}}, therefore if your {{cssxref("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.

See also

Property reference

  • {{cssxref("align-content")}}
  • {{cssxref("align-items")}}
  • {{cssxref("align-self")}}
  • {{cssxref("flex-wrap")}}
  • {{cssxref("flex-direction")}}
  • {{cssxref("flex")}}
  • {{cssxref("flex-basis")}}
  • {{cssxref("flex-flow")}}
  • {{cssxref("flex-grow")}}
  • {{cssxref("flex-shrink")}}
  • {{cssxref("justify-content")}}
  • {{cssxref("order")}}

Further reading

CSS flexbox guides: