Flex Basis

Set the initial size for flex items.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome
Edge
Firefox
Safari

fb-0
flex-basis: 0;
fb-1
flex-basis: .25rem;
fb-2
flex-basis: .5rem;
fb-3
flex-basis: .75rem;
fb-4
flex-basis: 1rem;
fb-5
flex-basis: 1.25rem;
fb-6
flex-basis: 1.5rem;
fb-7
flex-basis: 1.75rem;
fb-8
flex-basis: 2rem;
fb-9
flex-basis: 2.25rem;
fb-10
flex-basis: 2.5rem;
fb-11
flex-basis: 2.75rem;
fb-12
flex-basis: 3rem;
fb-13
flex-basis: 3.25rem;
fb-14
flex-basis: 3.5rem;
fb-15
flex-basis: 3.75rem;
fb-16
flex-basis: 4rem;
fb-17
flex-basis: 4.25rem;
fb-18
flex-basis: 4.5rem;
fb-19
flex-basis: 4.75rem;
fb-20
flex-basis: 5rem;
fb-21
flex-basis: 5.25rem;
fb-22
flex-basis: 5.5rem;
fb-23
flex-basis: 5.75rem;
fb-24
flex-basis: 6rem;
fb-25
flex-basis: 6.25rem;
fb-26
flex-basis: 6.5rem;
fb-27
flex-basis: 6.75rem;
fb-28
flex-basis: 7rem;
fb-29
flex-basis: 7.25rem;
fb-30
flex-basis: 7.5rem;
fb-31
flex-basis: 7.75rem;
fb-32
flex-basis: 8rem;
fb-33
flex-basis: 8.25rem;
fb-34
flex-basis: 8.5rem;
fb-35
flex-basis: 8.75rem;
fb-36
flex-basis: 9rem;
fb-37
flex-basis: 9.25rem;
fb-38
flex-basis: 9.5rem;
fb-39
flex-basis: 9.75rem;
fb-40
flex-basis: 10rem;
fb-41
flex-basis: 10.25rem;
fb-42
flex-basis: 10.5rem;
fb-43
flex-basis: 10.75rem;
fb-44
flex-basis: 11rem;
fb-45
flex-basis: 11.25rem;
fb-46
flex-basis: 11.5rem;
fb-47
flex-basis: 11.75rem;
fb-48
flex-basis: 12rem;
fb-49
flex-basis: 12.25rem;
fb-50
flex-basis: 12.5rem;
fb-51
flex-basis: 12.75rem;
fb-52
flex-basis: 13rem;
fb-53
flex-basis: 13.25rem;
fb-54
flex-basis: 13.5rem;
fb-55
flex-basis: 13.75rem;
fb-56
flex-basis: 14rem;
fb-57
flex-basis: 14.25rem;
fb-58
flex-basis: 14.5rem;
fb-59
flex-basis: 14.75rem;
fb-60
flex-basis: 15rem;
fb-61
flex-basis: 15.25rem;
fb-62
flex-basis: 15.5rem;
fb-63
flex-basis: 15.75rem;
fb-64
flex-basis: 16rem;
fb-65
flex-basis: 16.25rem;
fb-66
flex-basis: 16.5rem;
fb-67
flex-basis: 16.75rem;
fb-68
flex-basis: 17rem;
fb-69
flex-basis: 17.25rem;
fb-70
flex-basis: 17.5rem;
fb-71
flex-basis: 17.75rem;
fb-72
flex-basis: 18rem;
fb-73
flex-basis: 18.25rem;
fb-74
flex-basis: 18.5rem;
fb-75
flex-basis: 18.75rem;
fb-76
flex-basis: 19rem;
fb-77
flex-basis: 19.25rem;
fb-78
flex-basis: 19.5rem;
fb-79
flex-basis: 19.75rem;
fb-80
flex-basis: 20rem;
fb-81
flex-basis: 20.25rem;
fb-82
flex-basis: 20.5rem;
fb-83
flex-basis: 20.75rem;
fb-84
flex-basis: 21rem;
fb-85
flex-basis: 21.25rem;
fb-86
flex-basis: 21.5rem;
fb-87
flex-basis: 21.75rem;
fb-88
flex-basis: 22rem;
fb-89
flex-basis: 22.25rem;
fb-90
flex-basis: 22.5rem;
fb-91
flex-basis: 22.75rem;
fb-92
flex-basis: 23rem;
fb-93
flex-basis: 23.25rem;
fb-94
flex-basis: 23.5rem;
fb-95
flex-basis: 23.75rem;
fb-96
flex-basis: 24rem;
fb-97
flex-basis: 24.25rem;
fb-98
flex-basis: 24.5rem;
fb-99
flex-basis: 24.75rem;
fb-100
flex-basis: 25rem;
fb-auto
flex-basis: auto;
fb-full
flex-basis: 100%;
fb-half
flex-basis: 50%;

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

sm:fb-(value)
Small≥640px
md:fb-(value)
Medium≥768px
lg:fb-(value)
Large≥1024px
xxl:fb-(value)
Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:fb-(value)

Negative Values

Use negative variants to apply negative flex basis values.

Use the -- syntax to apply negative numeric values.

Syntax:fb--(value)