ContextQMD
Back to Content

Flex

files/en-us/glossary/flex/index.md

latest1.9 KB
Original Source

flex is a value of the CSS {{cssxref("display")}} property. Along with inline-flex, it causes the element it applies to become a {{glossary("flex container")}}, and the element's children to each become a {{glossary("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.

There is also a {{cssxref("flex")}} property, which is a shorthand for the flexbox properties {{cssxref("flex-grow")}}, {{cssxref("flex-shrink")}} and {{cssxref("flex-basis")}}. This property is only applicable to flex containers.

In addition {{cssxref("<flex>")}} can refer to a flexible length in CSS Grid Layout.

  • {{cssxref("align-content")}}
  • {{cssxref("align-items")}}
  • {{cssxref("align-self")}}
  • {{cssxref("flex")}}
  • {{cssxref("flex-basis")}}
  • {{cssxref("flex-direction")}}
  • {{cssxref("flex-flow")}}
  • {{cssxref("flex-grow")}}
  • {{cssxref("flex-shrink")}}
  • {{cssxref("flex-wrap")}}
  • {{cssxref("gap")}}
  • {{cssxref("justify-content")}}
  • {{cssxref("order")}}
  • {{cssxref("place-items")}}
  • {{cssxref("place-self")}}

See also