Flexbox

Container

  • display: flex or inline-flex.
  • flex-direction: row, row-reverse, column, or column-reverse. This determines whether items are ordered horizontally (rows) or vertically (columns).
  • flex-wrap: nowrap, wrap, wrap-reverse. By default all flex items will try to squeeze onto a single row.
  • flex-flow:  Shorthand for flex-direction and flex-wrap.
  • justify-content: flex-start, flex-end, center, space-between, space-around. Determines how extra free space beyond that consumed by the flex items will be placed.
  • align-items: flex-start, flex-end, center, stretch, baseline. Defines how items are laid out along the cross axis of current row.
  • align-content: flex-start, flex-end, center, stretch, space-between, space-around. Determines how extra free space is distributed on the cross-axis.

Items (childen of container)

  • order: on an individual item allows for an integer to be given that determines the order of the item. By default they are ordered as they are delineated in the source code.
  • flex-grow: takes an integer. This defines how much of the space the item is allowed to consume in a given container.
  • flex-shrink: takes an integer.
  • flex-basis: length or keyword. The main-size keyword is deprecated, auto is an option, and there are content (max-content, etc.) available but not supported enough for usage.
  • flex: Shorthand for flex-grow, flex-shrink, and flex-basis.[1]
  • align-self: auto, flex-start, flex-end, center, baseline, stretch. Overrides the default alignment or align-items specification for individual item.

Bibliography / Further Reading

  1. [1]CSS-Tricks recommends using this rather than the individual properties. The shrink and basis values are option, default is 0 1 auto.
%d bloggers like this: