Bootstrap 5 Flex Items

Flex items in CSS are the child elements of a flex container.

• Order
• Flex grow & Flex shrink
• Align self

Order:

Specifies the order of the flex item within the container.

Syntax:

order-{size?}-{value}

• order: Indicates flex order.
• size (optional): Responsive breakpoint (e.g., sm : ≥576px, md : ≥ 768px, lg : ≥992px, xl : ≥1200px, xxl : ≥1400px).
• value (optional): Responsive breakpoint (e.g., 0, 1, 2, 3, 4, 5):

Example:

• .order-1
• .order-sm-1
• .order-md-1
• .order-lg-1
• .order-xl-1
• .order-xxl-1

Flex Grow & Flex Shrink:

Syntax:

flex-{size?}-{type}-{value}

• flex: Indicates flex.
• size (optional): Responsive breakpoint (e.g., sm : ≥576px, md : ≥ 768px, lg : ≥992px, xl : ≥1200px, xxl : ≥1400px).
• type : grow | shrink:
• value : size (e.g., 0, 1):

Example:

• .flex-{grow | shrink}-0
• .flex-sm-{grow | shrink}-1
• .flex-md-{grow | shrink}-1
• .flex-lg-{grow | shrink}-1
• .flex-xl-{grow | shrink}-1
• .flex-xxl-{grow | shrink}-1

Align Self:

Align an individual flex item vertically.

Syntax:

align-self-{size?}-{type}

• align-self: Indicates flex align self.
• size (optional): Responsive breakpoint (e.g., sm : ≥576px, md : ≥ 768px, lg : ≥992px, xl : ≥1200px, xxl : ≥1400px).
• type : Defines the direction of the margin (e.g., start, end, center, baseline,stretch).

Example:

• .align-self-start
• .align-self-sm-start
• .align-self-md-start
• .align-self-lg-start
• .align-self-xl-start
• .align-self-xxl-start