Flex Items Properties

align-self

• allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Order

• controls the order in which flex-items appear in the flex container

.item {
  order: <integer>;
}

flex-grow

• defines the ability for a flex item to grow if necessary

• dictates what amount of the available space inside the flex container the item should take up

• a unitless measure that respresents a proportion or ratio

• flex-grow value overrides the width of the flex-item

.item {
  flex-grow: <number>; /* default 0 */
}

JS Bin on jsbin.com

In the example above, the 2nd flex-item (green box) has its flex-grow set to 2 while the other flex-items have their flex-grow set to 1

flex-shrink

• defines the ability for a flex item to shrink if necessary.

• a unitless measure that respresents a proportion or ratio (similar to flex-grow)

flex-basis

• Controls the default size of an element, before it is manipulated by other Flexbox properties

• It can be a length (e.g. pixels, percentages, etc) or auto

  • auto

.item {
  flex-basis: <length> | auto; /* default auto */
}

flex shorthand

• allows developers to specify a flex-item’s flex-grow, flex-shrink and flex-basis all at the same time

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}