30-seconds-of-code/articles/snippets/flexbox-cheatsheet.md

title, type, tags, author, cover, excerpt, dateModified

title	type	tags	author	cover	excerpt	dateModified
Flexbox Cheat Sheet	cheatsheet	css layout flexbox cheatsheet	chalarangelo	frames	Flexbox allows you to create fluid layouts easily. If you are constantly looking up how it works, this handy cheatsheet is all you need.	2021-06-12T19:30:41+03:00

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

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