Bootstrap 5 Flex Container

flex container enables a flexbox layout, which provides powerful and efficient ways to align and distribute space among items in the container, even when their sizes are dynamic or unknown.

• Flex direction
• Flex wrap
• Justify content
• Align items
• Align content
• Gap

Flex Direction:

Control the direction of flex items:

Syntax:

flex-{size?}-{direction}

• flex: Indicates flex.
• size (optional): Responsive breakpoint (e.g., sm : ≥576px, md : ≥ 768px, lg : ≥992px, xl : ≥1200px, xxl : ≥1400px).
• direction : Defines the direction of the margin (e.g., row, row-reverse, column, column-reverse).

Example:

• .flex-row
• .flex-sm-row
• .flex-md-row
• .flex-lg-row
• .flex-xl-row
• .flex-xxl-row

Flex Wrap:

Control whether flex items wrap onto multiple lines.

Syntax:

flex-{size?}-{type}

• flex: Indicates flex.
• 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., wrap, wrap-reverse, nowrap).

Example:

• .flex-wrap
• .flex-sm-wrap
• .flex-md-wrap
• .flex-lg-wrap
• .flex-xl-wrap
• .flex-xxl-wrap

Justify Content:

Align flex items horizontally along the main axis.

Syntax:

justify-content-{size?}-{type}

• justify-content: Indicates justify-content.
• 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, between,around,evenly).

Example:

• .justify-content-start
• .justify-content-sm-start
• .justify-content-md-start
• .justify-content-lg-start
• .justify-content-xl-start
• .justify-content-xxl-start

Align Items:

Align items vertically along the cross-axis.

Syntax:

align-items-{size?}-{type}

• align-items: Indicates align-items.
• 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-items-start
• .align-items-sm-start
• .align-items-md-start
• .align-items-lg-start
• .align-items-xl-start
• .align-items-xxl-start

Align Content:

Align items vertically along the cross-axis.

Syntax:

align-content-{size?}-{type}

• align-content: Indicates align-content.
• 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, around,stretch).

Example:

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

Gap:

Add spacing between flex items using gap classes:

Syntax:

gap-{size}

• gap: Indicates gap.
• size (optional): Responsive breakpoint (e.g., 0, 1, 2, 3, 4):