Flexbox is the commonly-used name for theCSS flexible box layout module, a layout model for displaying items in a single dimension — as a row or as a column.

In the specification, flexbox is described as a layout model for user interface design. The key feature of flexbox is that items in a flex layout can grow and shrink. Space can be assigned to the items themselves, or distributed between or around the items.

Flexbox also enables alignment of items on the main or cross axis, thus providing a high level of control over the size and alignment of a group of items.

See also

Property reference

• align-content
• align-items
• align-self
• flex
• flex-basis
• flex-direction
• flex-flow
• flex-grow
• flex-shrink
• flex-wrap
• justify-content
• order

Further reading

• CSS flexbox guides:
  • Basic concepts of flexbox
  • Relationship of flexbox to other layout methods
  • Aligning items in a flex container
  • Ordering flex items
  • Controlling ratios of flex items along the main axis
  • Mastering wrapping of flex items
  • Typical use cases of flexbox
• CSS Flexible Box Layout Module Level 1 specification