DEV Community

M Ramavel
M Ramavel

Posted on

CSS Flex Container

#webdev #css #beginners #javascript

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;
}
Enter fullscreen mode Exit fullscreen mode

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


.flex-container {
  display: flex;
  flex-direction: column;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Result

Image description
**

flex-wrap Property

Image description

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;
}
Enter fullscreen mode Exit fullscreen mode

Image description

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

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
Enter fullscreen mode Exit fullscreen mode

Image description

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;
}
Enter fullscreen mode Exit fullscreen mode

Image description

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;
}
Enter fullscreen mode Exit fullscreen mode

CSS justify-content Property

The justify-content property is used to align the flex items when they do not use all available space on the main-axis (horizontally).

The justify-content property can have one of the following values:

  • center
  • flex-start
  • flex-end
  • space-around
  • space-between
  • space-evenly

Center
Example
The center value positions the flex items in the center of the container:

.flex-container {
  display: flex;
  justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

Result:

Image description

Flex Start
Example
The flex-start value positions the flex items at the beginning of the container (this is default):

.flex-container {
  display: flex;
  justify-content: flex-start;
}
Enter fullscreen mode Exit fullscreen mode

Result:

Image description

Flex End
Example
The flex-end value positions the flex items at the end of the container:

.flex-container {
  display: flex;
  justify-content: flex-end;
}
Enter fullscreen mode Exit fullscreen mode

Result:

Image description

Space Around
Example
The space-around value displays the flex items with space around them:

.flex-container {
  display: flex;
  justify-content: space-around;
}
Enter fullscreen mode Exit fullscreen mode

Result:

Image description

Space between
Example
The space-between value displays the flex items with space between them:

.flex-container {
  display: flex;
  justify-content: space-between;
}
Enter fullscreen mode Exit fullscreen mode

Result:

Image description

Space Evenly
Example
The space-evenly value displays the flex items with equal space around them:

.flex-container {
  display: flex;
  justify-content: space-evenly;
}
Enter fullscreen mode Exit fullscreen mode

Image description

Align- items Property

The align-items property is used to align the flex items when they do not use all available space on the cross-axis (vertically).

The align-items property can have one of the following values:

  • center
  • flex-start
  • flex-end
  • stretch
  • baseline
  • normal.

Center
Example
The center value positions the flex items in the middle of the container:

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

Result:

Image description

Flex-Start
Example
The flex-start value positions the flex items at the top of the container:

.

flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}
Enter fullscreen mode Exit fullscreen mode

Result:

Image description

Flex-end
Example
The flex-end value positions the flex items at the bottom of the container:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}
Enter fullscreen mode Exit fullscreen mode

Result:

Image description

Stretch
Example
The stretch value stretches the flex items to fill the container (this is equal to "normal" which is default):

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}
Enter fullscreen mode Exit fullscreen mode

Result:

Image description

Baseline
Example
The baseline value positions the flex items at the baseline of the container:

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}
Enter fullscreen mode Exit fullscreen mode

Result

Image description

Top comments (4)

Collapse
 
asran_2025 profile image
Ranjani R •

Very detailed and informative.

Collapse
 
dotallio profile image
Dotallio •

Really clear breakdown, thanks! Do you have a favorite layout trick using flexbox that you reach for all the time?

Collapse
 
tanyonghe profile image
Tan Yong He •

Here's a useful CSS Flexbox Cheatsheet! 🧾

Collapse
 
nathan_tarbert profile image
Nathan Tarbert •

Perfect for when I forget flex-wrap again, thanks for putting all the basics in one spot