CSS Flex

This content originally appeared on DEV Community and was authored by M Ramavel

CSS Flex Container

The CSS properties we use for the flex container are:

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items

flex-direction

The flex-direction property specifies the display-direction of flex items in the flex container.

The flex-direction property can have one of the following values:

• row
• column
• row-reverse
• column-reverse

Row
EX:
The row value is the default value, and it displays the flex items horizontally (from left to right):

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

column
Example
The column value displays the flex items vertically (from top to bottom):

.flex-container {
  display: flex;
  flex-direction: column;
}

row-reverse
Example
The row-reverse value displays the flex items horizontally (but from right to left):

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

Column-reverse
Example
The column-reverse value displays the flex items vertically (but from bottom to top):

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

Result

**

flex-wrap Property

The flex-wrap property specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line.

The flex-wrap property can have one of the following values:

• nowrap
• wrap
• wrap-reverse

Nowrap
The nowrap value specifies that the flex items will not wrap (this is default):

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

Wrap
The wrap value specifies that the flex items will wrap if necessary:

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

Wrap-reverse
The wrap-reverse value specifies that the flex items will wrap if necessary, in reverse order:

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

flex-flow Property

The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.

Example

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

This content originally appeared on DEV Community and was authored by M Ramavel