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)