DEV Community

Manthan Ankolekar
Manthan Ankolekar

Posted on • Edited on

CSS Flex Cheatsheet

#css #flex

Flex Container Properties

display - Defines a flex container.

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

flex-direction - Specifies the direction of the main axis.

.container {
  flex-direction: row;
}

.container {
  flex-direction: row-reverse;
}
Enter fullscreen mode Exit fullscreen mode

flex-wrap - Determines whether flex items should wrap or not.

.container {
  flex-wrap: nowrap;
}

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

justify-content - Aligns flex items along the main axis.

.container {
  justify-content: flex-start;
}

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

align-items - Aligns flex items along the cross axis.

.container {
  align-items: flex-start;
}

.container {
  align-items: stretch;
}
Enter fullscreen mode Exit fullscreen mode

align-content - Aligns multiple lines of flex items along the cross axis.

.container {
  align-content: flex-start;
}

.container {
  align-content: space-around;
}
Enter fullscreen mode Exit fullscreen mode

Flex Item Properties

order: - Specifies the order of a flex item.

.flex-item {
  order: 2;
}
Enter fullscreen mode Exit fullscreen mode

flex-grow: - Determines how much a flex item can grow relative to other items.

.flex-item {
  flex-grow: 2;
}
Enter fullscreen mode Exit fullscreen mode

flex-shrink: - Specifies how much a flex item can shrink relative to other items.

.flex-item {
  flex-shrink: 0.5;
}
Enter fullscreen mode Exit fullscreen mode

flex-basis: - Defines the initial size of a flex item.

.flex-item {
  flex-basis: 200px;
}
Enter fullscreen mode Exit fullscreen mode

flex: - Shorthand property for flex-grow, flex-shrink, and flex-basis combined.

.flex-item {
  flex: 1 0 auto;
}
Enter fullscreen mode Exit fullscreen mode

align-self: - Overrides the align-items value for a specific flex item.

.flex-item {
  align-self: center;
}
Enter fullscreen mode Exit fullscreen mode
Property Description
display: flex Makes an element a flex container.
flex-direction: row Sets the main axis direction.
flex-wrap: wrap Wraps flex items when they overflow the container.
justify-content: flex-start Aligns flex items on the main axis.
align-items: stretch Aligns flex items on the cross axis.
order Specifies the order of flex items.
flex-grow Specifies how much a flex item can grow.
flex-shrink Specifies how much a flex item can shrink.
flex-basis Specifies the initial size of a flex item.

Example:

// Makes the div a flex container
div {
  display: flex;
}

// Sets the main axis direction to row
div {
  flex-direction: row;
}

// Wraps flex items when they overflow the container
div {
  flex-wrap: wrap;
}

// Aligns flex items on the main axis to the start
div {
  justify-content: flex-start;
}

// Aligns flex items on the cross axis to stretch
div {
  align-items: stretch;
}

// Specifies the order of flex items
div {
  order: 2;
}

// Specifies how much a flex item can grow
div {
  flex-grow: 1;
}

// Specifies how much a flex item can shrink
div {
  flex-shrink: 1;
}

// Specifies the initial size of a flex item
div {
  flex-basis: 100px;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

sonaykara profile image

Some new features CSS in 2024

Sonay Kara -

nnnirajn profile image

10 CSS Code Snippets Every UI Developer Should Know

Niraj Narkhede -

thj profile image

Should I use Tailwind? 5 things to consider — real experience [2024]

T.H. Jacobs -

rocambille profile image

A CSS razor

Romain Guillemot -