Question

What is the flex-direction property used for?

#css #flexbox

Answer

The flex-direction property specifies how flex items are placed in the flex container defining the *main axis* and the *direction* (normal or reversed).

row | row-reverse | column | column-reverse

Upon switching flex-direction to column, every property that affected the old main axis (the horizontal axis) now affects the new main axis, i.e. the vertical axis. For example, a property like flex-basis that affected the width of a flex item now affects its height.

The cross axis will normally go from left to right using flex-direction: column or flex-direction: column-reverse, but that can also be changed, to go from right to left, using the property direction: rtl (a generic property, not flexbox-specific). [^3]

[^1]: What happens when you switch flex-direction?
[^2]: MDN > ... > CSS > flex-direction
[^3]: http://stackoverflow.com/a/38231449
[^4]: MDN > ... > CSS > direction

Learn

Author

xavi

Reviews
Last
next

Students 1