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: October 24th, 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

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

For the Flex Items

Flex Item 1
Flex Item 2
Flex Item 3

order

.item {
    order: 1;
}

flex-grow

This is the opposite/inverse of flex-shrink.

.item {
    flex-grow: 1;
}

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

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

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;
}
                        
.container {
    grid-template-columns: repeat(4, 100px);
    grid-template-rows: repeat(3, 40px);
}

column-gap/row-gap

Note: These properties used to be grid-column-gap and grid-row-gap. 

.container {
    column-gap: 3rem;
    row-gap: 20px;
}

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

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

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

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

place-content

Sets both the align-content and justify-content properties at once.

.container {
    place-content: <align-content> / <justify-content>;
}

For the Grid Items

grid-column-start / grid-column-end / grid-row-start / grid-row-end

Determines a Grid Item's location in the Grid using grid lines. If no grid-column-end or grid-row-end is declared, the Grid Item will span 1 track by default.

.item {
    grid-column-start: <number> | <name> | span <number> | span <name> | auto;
    grid-column-end: <number> | <name> | span <number> | span <name> | auto;
    grid-row-start: <number> | <name> | span <number> | span <name> | auto;
    grid-row-start: <number> | <name> | span <number> | span <name> | auto;
}
  • <number> Refer to a numbered Grid line
  • <name>: Refer to a named Grid line
  • span <number>: The Grid Item will span across this number of Grid tracks
  • span <name>: The Grid Item will span until it hits the named Grid line
  • auto: Auto-placement, automatic span, or a default span of one

grid-column / grid-row

Sets both the start and end properties for either the column or row.

.item {
    grid-column: <start-number|start-name> / <end-number|end-name>;
    grid-row: <start-number|start-name> / <end-number|end-name>;
}
More CSS Grid properties coming soon!