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:

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
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;
}

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
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;
}

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

Print Share Comment Cite Upload Translate Updates

APA

M Ramavel | Sciencx (2025-06-29T05:17:11+00:00) CSS Flex. Retrieved from https://www.scien.cx/2025/06/29/css-flex/

MLA

" » CSS Flex." M Ramavel | Sciencx - Sunday June 29, 2025, https://www.scien.cx/2025/06/29/css-flex/

HARVARD

M Ramavel | Sciencx Sunday June 29, 2025 » CSS Flex., viewed ,<https://www.scien.cx/2025/06/29/css-flex/>

VANCOUVER

M Ramavel | Sciencx - » CSS Flex. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/06/29/css-flex/

CHICAGO

" » CSS Flex." M Ramavel | Sciencx - Accessed . https://www.scien.cx/2025/06/29/css-flex/

IEEE

" » CSS Flex." M Ramavel | Sciencx [Online]. Available: https://www.scien.cx/2025/06/29/css-flex/. [Accessed: ]