Thomas Koefod: web applications & design
HomeBlogabout meAppsPodcastslinks
Take this - non-profit stand up for mental health

flex quick reference

Flex

container/parent

  • display: flex make this a flex styles
  • flex-direction
    • row (default)
    • column
    • row-reverse
    • column-reverse
  • flex-wrap
    • wrap
    • nowrap (default)
    • wrap-reverse
  • flex-flow - shorthand for ‘flex-wrap’ & ‘flex-direction’
    • flex-flow: <flex-direction> || <flex-wrap>
    • default: flex-flow: row nowrap
  • justify-content - defines the alignment along the main axis.
    • flex-start (default)
    • flex-end
    • center
    • space-between
    • space-around

  • align-items - defines the layout along the minor axis (like justify-content but for the minor axis)

    • flex-start
    • flex-end
    • center
    • baseline
    • stretch (default)

  • align-content - defines the alignment along the minor axis when extra space exists. (no effect if only one line)

    • flex-start
    • flex-end
    • center
    • space-between
    • space-around
    • stretch (default)

child/items

  • order - integer order to override default of source order.
    • default 0
  • flex-grow - unitless value that serves as a proportion for the size (major axis) of the child
    • default 0
  • flex-shrink - unitless value defines ability to shrink if necessary (to fit on major axis)
    • default 1
  • flex-basis - This defines the default size of an element before the remaining space is distributed.
    • length in %, px, rem…
    • auto (default) - look at my width or height property
    • content - based on content
  • flex - shorthand for flex-grow, flex-shrink and flex-basis.
    • flex <flex-grow> <flex-shrink> <flex-basis>
    • default: flex 0 1 auto
  • align-self - allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.
    • flex-start
    • flex-end
    • center
    • baseline
    • stretch