Flexbox Cheat Sheet

Angelos Chalaris · CSS, Layout, Flexbox, Cheatsheet · Jun 12, 2021

Container

  • display: flex or display: inline-flex: creates a flex context (or an inline flex context) for direct children of this element
  • flex-direction determines the main and cross axis for the container, valid values are:
    • row (default): horizontal, in the direction of writing (left to right for English)
    • row-reverse: horizontal, in the opposite direction of writing (right to left for English)
    • column: vertical, top to bottom
    • column-reverse: vertical, bottom to top
  • flex-wrap determines if flex items will try to fit in one line, valid values are:
    • nowrap (default): all flex items will be on one line
    • wrap: flex items will wrap onto multiple lines, top to bottom
    • wrap-reverse: flex items will wrap onto multiple lines, bottom to top
  • flex-flow: shorthand combining flex-direction and flex-wrap
    • Formal syntax: flex-flow: <'flex-direction'> || <'flex-wrap'>
  • justify-content defines the alignment along the main axis, valid values are:
    • flex-start (default): pack flex items from the start
    • flex-end: pack flex items from the end
    • start: pack items from the start
    • end: pack items from the end
    • left: pack items from the left
    • right: pack items from the right
    • center: pack items around the center
    • space-around: distribute items evenly with equal space around them
    • space-between: distribute items evenly with equal space between them
    • space-evenly: distribute items evenly, ensuring equal space between any two items
    • stretch: distribute items evenly, stretching auto-sized items to fit the container
  • align-items defines the alignment along the cross axis, valid values are:
    • flex-start (default): pack flex items from the start
    • flex-end: pack flex items from the end
    • start: pack items from the start
    • end: pack items from the end
    • center: pack items around the center
    • baseline: align items based on their baselines
    • stretch: stretch items to fill the container
  • align-content defines the alignment of extra space along the cross axis, valid values are:
    • flex-start (default): pack flex items from the start
    • flex-end: pack flex items from the end
    • start: pack items from the start
    • end: pack items from the end
    • center: pack items around the center
    • space-around: distribute items evenly with equal space around them
    • space-between: distribute items evenly with equal space between them
    • space-evenly: distribute items evenly, ensuring equal space between any two items
    • stretch: distribute items evenly, stretching auto-sized items to fit the container
Diagram of Flexbox properties

Items

  • flex-grow determines how much the item can grow if necessary
    • Accepts a single positive number (unitless), default value is 0
    • Specifies how much of the remaining space in the flex container should be assigned to the item
    • The remaining space is the size of the flex container minus the size of all flex items' sizes together
    • If all items have the same flex-grow, all items will receive an equal share of the remaining space
    • If not all items have the same flex-grow, the remaining space is distributed according to the ratio defined by these values
  • flex-shrink determines how much the items can shrink if necessary
    • Accepts a single positive number (unitless), default value is 1
    • If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink
  • flex-basis determines the initial size of a flex item before the remaining space is distributed
    • Can use any valid width value, intrinsic size values, auto (default) or content
    • auto means "look at my width or height property", whereas content is used for automatic sizing
  • flex: shorthand combining flex-grow, flex-shrink and flex-basis
    • Formal syntax: flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
  • align-self allows the item to override the default align-items specified by the container
    • Valid values are the same as those of the align-items property in the container
  • order determines the ordering of the item
    • Accepts an integer value
    • Items in a container are sorted by ascending order value and then by their source code order
    • Might cause accessibility issues if used incorrectly

Recommended snippets & collections

  • Cheatsheets

    Snippet collection

    A collection of cheatsheets to bookmark and come back to whenever you need to look up anything.

  • Masonry Layout

    CSS, Layout

    Creates a masonry-style layout that is especially useful when working with images.

  • Learn everything you need to know about CSS units with this handy cheatsheet.

  • Creates a responsive image mosaic.