Flexbox Item Properties

Learn about all the properties that can be applied to flex items.

Interactive Demo

Adjust the properties below to see how they affect the highlighted flex item.

order

flex-grow

flex-shrink

flex-basis

align-self

.flex-item {
  order: 0;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  
  /* Shorthand */
  flex: 0 1 auto;
}

The yellow-bordered item (3) has the custom flex properties applied.