> For the complete documentation index, see [llms.txt](https://bryan-guner.gitbook.io/my-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bryan-guner.gitbook.io/my-docs/cheat-sheets/readme/flexbox-cheat-sheet.md).

# Flexbox Cheat Sheet

#### 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