Flex
flex
is a new value added to the CSS display
property. Along with inline-flex
it causes the element that it applies to in order to become a flex container, and the element's children to each become a flex item. The items then participate in flex layout, and all of the properties defined in the CSS Flexible Box Layout Module may be applied.
The flex
property is a shorthand for the flexbox properties flex-grow
, flex-shrink
and flex-basis
.
In addition <flex>
can refer to a flexible length in CSS Grid Layout.
See also
Property reference
Further reading
- CSS Flexible Box Layout Module Level 1 Specification
- CSS Flexbox Guide: Basic Concepts of Flexbox
- CSS Flexbox Guide: Relationship of flexbox to other layout methods
- CSS Flexbox Guide: Aligning items in a flex container
- CSS Flexbox Guide: Ordering flex items
- CSS Flexbox Guide: Controlling Ratios of flex items along the main axis
- CSS Flexbox Guide: Mastering wrapping of flex items
- CSS Flexbox Guide: Typical use cases of flexbox