Search within TutorialsPark

CSS3 flex-direction Property


To make an element translucent or invisible


Definition and Notes.

1. The CSS3 flex-direction property is used to set the direction of the main axis.

2. Within the flex container, flex items can be laid out in rows or columns in forward or reverse order.


Syntax:

CSS flex-direction property. internetexplorer safari firefox opera chrome

View in Splitscreen»

Code-Editor:

Note- By default, flex containers display only a single row or column of flex items. To display multiple rows/columns use flex-wrap property.

Property Values

Value Description
row Its the main axis, the direction is same as that of currrent language
row-reverse The direction of main axis is reverse of row
column The direction of main axis is reverse of row
row-reverse The direction of main axis is reverse of row

Specifications

Specs Value
Name flex-direction
Value row | row-reverse | column | column-reverse
Initial Value row
Applies to flex containers
Javascript syntax object.style.flexDirection="row"
Inherited No
Computed Value Same as declared value.
Browser Support internetexplorer safari firefox opera chrome

Related Examples.