Queens, NYC
58.9°

Flexbox and CSS Grid Reference


Flexbox helps you layout elements inside a container in 1 dimension (by describing the attributes of a list of elements). CSS Grid helps you layout in 2 dimensions (by specifying the attributes of rows and columns inside a container). This page is a quick reference for both.

Last Updated: Thurs, September 10th, 2020

Flexbox

For the Flex Container

Flex Item 1
Flex Item 2
Flex Item 3

display
                    
.container {
    display: flex | inline-flex;
}
                
  • flex
  • inline-flex
flex-direction
                    
.container {
    flex-direction: row | row-reverse | column | column-reverse;
}
                
  • row (default): The direction text is laid out in a line (left to right in ltr; right to left in rtl)
  • row-reverse: Like row, but reversed
  • column: The direction in which lines of text are stacked
  • column-reverse: Like column but reversed
flex-wrap
                    
.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}
                
  • nowrap (default): All Flex Items will be on one line
  • wrap: Flex Items will wrap onto multiple lines, top to bottom
  • wrap-reverse: Like wrap but bottom to top
flex-flow
                    
.container {
    flex-flow: column-reverse wrap-reverse;
}
                

Combines the following properties:

justify-content
                    
.container {
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
                
  • flex-start (default): Pack Flex Items from the start
  • flex-end: Pack Flex Items from the end
  • center: Pack Flex Items around the center
  • space-between: Distribute Flex Items evenly, first item flush with start, last item flush with end
  • space-around: Distribute Flex Items evenly, with half-size space at either end
  • space-evenly: Distribute Flex Items evenly, with items having equal space around them
  • Note: There are other values for this property. MDN Reference

Example

justify-content:

Flex Item 1
Flex Item 2
Flex Item 3
align-items
Like justify-content, but for the cross-axis instead of the main-axis.
                    
.container {
    align-items: flex-start | flex-end | center | stretch | baseline;
}
                
  • flex-start (default): Pack Flex Items from the start
  • flex-end: Pack Flex Items from the end
  • center: Pack Flex Items around the center
  • stretch: Flex Items stretch to fill the container
  • baseline: Align the Flex Items baselines
  • Note: There are other values for this property. MDN Reference

Example

align-items:

Line 1
Line 2
Line 1
Line 2
Line 3
Line 1

For the Flex Items

Flex Item 1
Flex Item 2
Flex Item 3

order
                    
.item {
    order: 1;
}
                

Example

order:

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
flex-grow
This is the opposite/inverse of flex-shrink.
                    
.item {
    flex-grow: 1;
}
                

Example

flex-grow:

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
flex-shrink
This is the opposite/inverse of flex-grow.
                    
.item {
    flex-shrink: 1;
}
                
flex-basis
This property sets the initial main size of a Flex Item.
                    
.item {
    flex-basis: auto;
}
                

Example

flex-basis:

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
flex
Shorthand for flex-grow, flex-shrink, and flex-basis. The last two parameters are optional. It's recommended to use this property instead of the individual ones.
                    
.item {
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>];
}
                
align-self
                    
.item {
    align-self: auto | flex-start | flex-end | center | stretch | baseline;
}
                
  • auto (default): Same as the container's align-items value
  • flex-start: Pack Flex Items from the start
  • flex-end: Pack Flex Items from the end
  • center: Pack Flex Items around the center
  • stretch: Flex Items stretch to fill the container
  • baseline: Align the Flex Items baselines
  • Note: There are other values for this property. MDN Reference

Example

align-self:

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6


CSS Grid

For the Grid Container

display
                    
.container {
    display: grid | inline-grid;
}
                
  • grid
  • inline-grid
grid-template-columns/grid-template-rows
                        
.container {
    grid-template-columns: 200px 100px auto;
    grid-template-rows: 25% auto;
}
                    

Result

200px / 25%
100px / 25%
auto / 25%
200px / auto
100px / auto
auto / auto

                        
.container {
    grid-template-columns: repeat(4, 100px);
    grid-template-rows: repeat(3, 40px);
}
                    

Result

1
2
3
4
5
6
7
8
9
10
11
12
column-gap/row-gap
Note: These properties used to be grid-column-gap and grid-row-gap.
                    
.container {
    column-gap: 3rem;
    row-gap: 20px;
}
                

Example

1
2
3
4
5
6
7
8
9
gap
Note: This property used to be grid-gap.

A shorthand for row-gap and column-gap.
                    
.container {
    gap: <grid-row-gap> <grid-column-gap>;
}
                
justify-items
Aligns Grid Items along the row axis. See align-items for aligning items along the column axis.
                    
.container {
    justify-items: start | end | center | stretch;
}
                
  • start: Align Grid Items to be flush with the start edge of the cell
  • end: Align Grid Items to be flush with the end edge of the cell
  • center: Align Grid Items in the center of the cell
  • stretch (default): Fills the width of the cell
  • Note: There are other values for this property. MDN Reference

Example

justify-items:

1 2 3 4 5 6 7 8 9
align-items
Aligns Grid Items along the column axis. See justify-items for aligning items along the row axis.
                    
.container {
    align-items: start | end | center | stretch;
}
                
  • start: Align Grid Items to be flush with the start edge of the cell
  • end: Align Grid Items to be flush with the end edge of the cell
  • center: Align Grid Items in the center of the cell
  • stretch (default): Fills the height of the cell
  • Note: There are other values for this property. MDN Reference

Example

align-items:

1
2
3
4
5
6
7
8
9
place-items
Sets both the align-items and justify-items properties at once.
                    
.container {
    place-items: <align-items> / <justify-items>;
}
                
justify-content
If the grid itself is smaller than the grid container, aligns the grid along the inline (row) axis (align-content aligns along the block (column) axis).
                    
.container {
    justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
                
  • start: Align Grid to be flush with the start edge of the Grid Container
  • end: Align Grid to be flush with the end edge of the Grid Container
  • center: Align Grid in the center of the Grid Container
  • stretch: Resize Grid Items to allow the Grid to fill the width of the grid container
  • space-around: Distribute Grid Items evenly (half-size spaces on either end)
  • space-between: Distribute Grid Items evenly (no space on either end)
  • space-evenly: Distribute Grid Items evenly

Example

justify-content:

1
2
3
4
align-content
If the grid itself is smaller than the grid container, aligns the grid along the block (column) axis (justify-content aligns along the inline (row) axis).
                    
.container {
    align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
                
  • start: Align Grid to be flush with the start edge of the Grid Container
  • end: Align Grid to be flush with the end edge of the Grid Container
  • center: Align Grid in the center of the Grid Container
  • stretch: Resize Grid Items to allow the Grid to fill the width of the grid container
  • space-around: Distribute Grid Items evenly (half-size spaces on either end)
  • space-between: Distribute Grid Items evenly (no space on either end)
  • space-evenly: Distribute Grid Items evenly

Example

align-content:

1
2
3
4
place-content
Sets both the align-content and justify-content properties at once.
                    
.container {
    place-content: <align-content> / <justify-content>;
}
                

More CSS Grid properties coming soon!