Advertisement
Google Ad Slot: content-top
Bootstrap 5 Flex Items
Flex items in CSS are the child elements of a flex container.
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
1
2
3
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
Flex Grow
1
2
2
3
Flex Shrink
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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
1
2
3
4
5