flex-direction in CSS – How to Set Flex Children's Orientation
flex-direction tells browsers the specific direction (row or column) they should lay out a flexible container's direct children.
In other words,
flex-direction defines a flexbox's main axis.
Main Axis vs. Cross Axis: What's the Difference?
A flexbox's main axis is the layout orientation defined by a
A flexbox's cross axis is the perpendicular orientation to the main axis.
For instance, suppose you set your flexible container's
flex-direction (main axis) to
row. In that case, column will be the container's cross axis.
flex-direction's default value. Therefore, suppose you do not specify a
flex-direction property. In that case, browsers will auto-arrange your flexible container's items in the row direction of your browser's default language.
- Left to right is an English browser's default row direction. But an Arabic browser's default row direction is right to left.
writing-modeproperty can change the browser's default block flow direction.
Example: Set a Flex Container's Main Axis to the Column Direction
The snippet above organized the flexible
<section> containers' items in the column direction of your browser's default language.
flex-direction: column-reverse (or
flex-direction: row-reverse) to reverse the browser's layout direction.
This article discussed what a CSS
flex-direction property is. We also used an example to understand how it works.