CSS Flexbox Ordering Orientation

❮ Previous Home Next ❯

The CSS Flexbox Ordering & Orientation

The contents of a flex container can be laid out in any direction and in any order.

This allows to trivially achieve effects that would previously have required complex or fragile methods, such as hacks using the float and clear properties.

This are flex properties are used in flexbox ordering orientation(direction):

Notes:

The reordering capabilities of flex layout intentionally affect only the visual rendering, leaving speech order and navigation based on the source order.

This allows authors to manipulate the visual presentation while leaving the source order intact for non-CSS UAs and for linear models such as speech and sequential navigation.




flex-direction

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

Syntax:

flex-direction: row|row-reverse|column|column-reverse;


1
2
3
4
5

Example

.container {
  display: flex;
  flex-direction: row-reverse;
}



flex-wrap

The flex-wrap property sets whether flex items are forced onto one line or can wrap onto multiple lines.

If wrapping is allowed, it sets the direction that lines are stacked.

Syntax:

flex-wrap: nowrap|wrap|wrap-reverse;


1
2
3
4
5
6
7
8
9
10

Example

.container {
  display: flex;
  flex-wrap: wrap;
}



flex-flow

The flex-flow property is a shorthand for setting the flex-direction and flex-wrap properties, which together define the flex container’s main and cross axes.

Note: The flex-flow directions are writing mode sensitive. In vertical Japanese, for example, a row flex container lays out its contents from top to bottom.

Syntax:

flex-flow: flex-direction flex-wrap;


1
2
3
4
5

Example

.container {
  display: flex;
  flex-flow: row-reverse wrap-reverse;
}






order

The order property sets the order to lay out an item in a flex or grid container.

Items in a container are sorted by ascending order value and then by their source code order.

Syntax:

order: number;

number - number Default value is 0. Specifies the order for the flexible item.



1
2
3
4
5

Example

.container {
  display: flex;
}

.item1 {order:5;}
.item2 {order:1;}
.item3 {order:4;}
.item4 {order:2;}
.item5 {order:3;}



All CSS Flexbox Properties

Property Description
align-content Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.
align-items Sets the align-self value on all direct children as a group.
align-self Specifies the default alignment for items within the flex container.
display Specifies an element’s display type and can override an element’s defined presentation.
flex Sets how a flex item will grow or shrink to fit the space available in its flex container.
flex-basis Sets the initial main size of a flex item.
flex-direction Sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).
flex-flow A shorthand property for the flex-direction and the flex-wrap properties.
flex-grow Specifies the flex grow factor of a flex item's main size.
flex-shrink Sets the flex shrink factor of a flex item.
flex-wrap Sets whether flex items are forced onto one line or can wrap onto multiple lines.
justify-content Specifies the alignment between the items inside a flexible container when the items do not use all available space.
❮ Previous Home Next ❯