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-101
flex-basis: 25.25rem;
fb-102
flex-basis: 25.5rem;
fb-103
flex-basis: 25.75rem;
fb-104
flex-basis: 26rem;
fb-105
flex-basis: 26.25rem;
fb-106
flex-basis: 26.5rem;
fb-107
flex-basis: 26.75rem;
fb-108
flex-basis: 27rem;
fb-109
flex-basis: 27.25rem;
fb-110
flex-basis: 27.5rem;
fb-111
flex-basis: 27.75rem;
fb-112
flex-basis: 28rem;
fb-113
flex-basis: 28.25rem;
fb-114
flex-basis: 28.5rem;
fb-115
flex-basis: 28.75rem;
fb-116
flex-basis: 29rem;
fb-117
flex-basis: 29.25rem;
fb-118
flex-basis: 29.5rem;
fb-119
flex-basis: 29.75rem;
fb-120
flex-basis: 30rem;
fb-121
flex-basis: 30.25rem;
fb-122
flex-basis: 30.5rem;
fb-123
flex-basis: 30.75rem;
fb-124
flex-basis: 31rem;
fb-125
flex-basis: 31.25rem;
fb-126
flex-basis: 31.5rem;
fb-127
flex-basis: 31.75rem;
fb-128
flex-basis: 32rem;
fb-129
flex-basis: 32.25rem;
fb-130
flex-basis: 32.5rem;
fb-131
flex-basis: 32.75rem;
fb-132
flex-basis: 33rem;
fb-133
flex-basis: 33.25rem;
fb-134
flex-basis: 33.5rem;
fb-135
flex-basis: 33.75rem;
fb-136
flex-basis: 34rem;
fb-137
flex-basis: 34.25rem;
fb-138
flex-basis: 34.5rem;
fb-139
flex-basis: 34.75rem;
fb-140
flex-basis: 35rem;
fb-141
flex-basis: 35.25rem;
fb-142
flex-basis: 35.5rem;
fb-143
flex-basis: 35.75rem;
fb-144
flex-basis: 36rem;
fb-145
flex-basis: 36.25rem;
fb-146
flex-basis: 36.5rem;
fb-147
flex-basis: 36.75rem;
fb-148
flex-basis: 37rem;
fb-149
flex-basis: 37.25rem;
fb-150
flex-basis: 37.5rem;
fb-151
flex-basis: 37.75rem;
fb-152
flex-basis: 38rem;
fb-153
flex-basis: 38.25rem;
fb-154
flex-basis: 38.5rem;
fb-155
flex-basis: 38.75rem;
fb-156
flex-basis: 39rem;
fb-157
flex-basis: 39.25rem;
fb-158
flex-basis: 39.5rem;
fb-159
flex-basis: 39.75rem;
fb-160
flex-basis: 40rem;
fb-161
flex-basis: 40.25rem;
fb-162
flex-basis: 40.5rem;
fb-163
flex-basis: 40.75rem;
fb-164
flex-basis: 41rem;
fb-165
flex-basis: 41.25rem;
fb-166
flex-basis: 41.5rem;
fb-167
flex-basis: 41.75rem;
fb-168
flex-basis: 42rem;
fb-169
flex-basis: 42.25rem;
fb-170
flex-basis: 42.5rem;
fb-171
flex-basis: 42.75rem;
fb-172
flex-basis: 43rem;
fb-173
flex-basis: 43.25rem;
fb-174
flex-basis: 43.5rem;
fb-175
flex-basis: 43.75rem;
fb-176
flex-basis: 44rem;
fb-177
flex-basis: 44.25rem;
fb-178
flex-basis: 44.5rem;
fb-179
flex-basis: 44.75rem;
fb-180
flex-basis: 45rem;
fb-181
flex-basis: 45.25rem;
fb-182
flex-basis: 45.5rem;
fb-183
flex-basis: 45.75rem;
fb-184
flex-basis: 46rem;
fb-185
flex-basis: 46.25rem;
fb-186
flex-basis: 46.5rem;
fb-187
flex-basis: 46.75rem;
fb-188
flex-basis: 47rem;
fb-189
flex-basis: 47.25rem;
fb-190
flex-basis: 47.5rem;
fb-191
flex-basis: 47.75rem;
fb-192
flex-basis: 48rem;
fb-193
flex-basis: 48.25rem;
fb-194
flex-basis: 48.5rem;
fb-195
flex-basis: 48.75rem;
fb-196
flex-basis: 49rem;
fb-197
flex-basis: 49.25rem;
fb-198
flex-basis: 49.5rem;
fb-199
flex-basis: 49.75rem;
fb-200
flex-basis: 50rem;
fb-201
flex-basis: 50.25rem;
fb-202
flex-basis: 50.5rem;
fb-203
flex-basis: 50.75rem;
fb-204
flex-basis: 51rem;
fb-205
flex-basis: 51.25rem;
fb-206
flex-basis: 51.5rem;
fb-207
flex-basis: 51.75rem;
fb-208
flex-basis: 52rem;
fb-209
flex-basis: 52.25rem;
fb-210
flex-basis: 52.5rem;
fb-211
flex-basis: 52.75rem;
fb-212
flex-basis: 53rem;
fb-213
flex-basis: 53.25rem;
fb-214
flex-basis: 53.5rem;
fb-215
flex-basis: 53.75rem;
fb-216
flex-basis: 54rem;
fb-217
flex-basis: 54.25rem;
fb-218
flex-basis: 54.5rem;
fb-219
flex-basis: 54.75rem;
fb-220
flex-basis: 55rem;
fb-221
flex-basis: 55.25rem;
fb-222
flex-basis: 55.5rem;
fb-223
flex-basis: 55.75rem;
fb-224
flex-basis: 56rem;
fb-225
flex-basis: 56.25rem;
fb-226
flex-basis: 56.5rem;
fb-227
flex-basis: 56.75rem;
fb-228
flex-basis: 57rem;
fb-229
flex-basis: 57.25rem;
fb-230
flex-basis: 57.5rem;
fb-231
flex-basis: 57.75rem;
fb-232
flex-basis: 58rem;
fb-233
flex-basis: 58.25rem;
fb-234
flex-basis: 58.5rem;
fb-235
flex-basis: 58.75rem;
fb-236
flex-basis: 59rem;
fb-237
flex-basis: 59.25rem;
fb-238
flex-basis: 59.5rem;
fb-239
flex-basis: 59.75rem;
fb-240
flex-basis: 60rem;
fb-241
flex-basis: 60.25rem;
fb-242
flex-basis: 60.5rem;
fb-243
flex-basis: 60.75rem;
fb-244
flex-basis: 61rem;
fb-245
flex-basis: 61.25rem;
fb-246
flex-basis: 61.5rem;
fb-247
flex-basis: 61.75rem;
fb-248
flex-basis: 62rem;
fb-249
flex-basis: 62.25rem;
fb-250
flex-basis: 62.5rem;
fb-251
flex-basis: 62.75rem;
fb-252
flex-basis: 63rem;
fb-253
flex-basis: 63.25rem;
fb-254
flex-basis: 63.5rem;
fb-255
flex-basis: 63.75rem;
fb-256
flex-basis: 64rem;
fb-257
flex-basis: 64.25rem;
fb-258
flex-basis: 64.5rem;
fb-259
flex-basis: 64.75rem;
fb-260
flex-basis: 65rem;
fb-261
flex-basis: 65.25rem;
fb-262
flex-basis: 65.5rem;
fb-263
flex-basis: 65.75rem;
fb-264
flex-basis: 66rem;
fb-265
flex-basis: 66.25rem;
fb-266
flex-basis: 66.5rem;
fb-267
flex-basis: 66.75rem;
fb-268
flex-basis: 67rem;
fb-269
flex-basis: 67.25rem;
fb-270
flex-basis: 67.5rem;
fb-271
flex-basis: 67.75rem;
fb-272
flex-basis: 68rem;
fb-273
flex-basis: 68.25rem;
fb-274
flex-basis: 68.5rem;
fb-275
flex-basis: 68.75rem;
fb-276
flex-basis: 69rem;
fb-277
flex-basis: 69.25rem;
fb-278
flex-basis: 69.5rem;
fb-279
flex-basis: 69.75rem;
fb-280
flex-basis: 70rem;
fb-281
flex-basis: 70.25rem;
fb-282
flex-basis: 70.5rem;
fb-283
flex-basis: 70.75rem;
fb-284
flex-basis: 71rem;
fb-285
flex-basis: 71.25rem;
fb-286
flex-basis: 71.5rem;
fb-287
flex-basis: 71.75rem;
fb-288
flex-basis: 72rem;
fb-289
flex-basis: 72.25rem;
fb-290
flex-basis: 72.5rem;
fb-291
flex-basis: 72.75rem;
fb-292
flex-basis: 73rem;
fb-293
flex-basis: 73.25rem;
fb-294
flex-basis: 73.5rem;
fb-295
flex-basis: 73.75rem;
fb-296
flex-basis: 74rem;
fb-297
flex-basis: 74.25rem;
fb-298
flex-basis: 74.5rem;
fb-299
flex-basis: 74.75rem;
fb-300
flex-basis: 75rem;
fb-301
flex-basis: 75.25rem;
fb-302
flex-basis: 75.5rem;
fb-303
flex-basis: 75.75rem;
fb-304
flex-basis: 76rem;
fb-305
flex-basis: 76.25rem;
fb-306
flex-basis: 76.5rem;
fb-307
flex-basis: 76.75rem;
fb-308
flex-basis: 77rem;
fb-309
flex-basis: 77.25rem;
fb-310
flex-basis: 77.5rem;
fb-311
flex-basis: 77.75rem;
fb-312
flex-basis: 78rem;
fb-313
flex-basis: 78.25rem;
fb-314
flex-basis: 78.5rem;
fb-315
flex-basis: 78.75rem;
fb-316
flex-basis: 79rem;
fb-317
flex-basis: 79.25rem;
fb-318
flex-basis: 79.5rem;
fb-319
flex-basis: 79.75rem;
fb-320
flex-basis: 80rem;
fb-321
flex-basis: 80.25rem;
fb-322
flex-basis: 80.5rem;
fb-323
flex-basis: 80.75rem;
fb-324
flex-basis: 81rem;
fb-325
flex-basis: 81.25rem;
fb-326
flex-basis: 81.5rem;
fb-327
flex-basis: 81.75rem;
fb-328
flex-basis: 82rem;
fb-329
flex-basis: 82.25rem;
fb-330
flex-basis: 82.5rem;
fb-331
flex-basis: 82.75rem;
fb-332
flex-basis: 83rem;
fb-333
flex-basis: 83.25rem;
fb-334
flex-basis: 83.5rem;
fb-335
flex-basis: 83.75rem;
fb-336
flex-basis: 84rem;
fb-337
flex-basis: 84.25rem;
fb-338
flex-basis: 84.5rem;
fb-339
flex-basis: 84.75rem;
fb-340
flex-basis: 85rem;
fb-341
flex-basis: 85.25rem;
fb-342
flex-basis: 85.5rem;
fb-343
flex-basis: 85.75rem;
fb-344
flex-basis: 86rem;
fb-345
flex-basis: 86.25rem;
fb-346
flex-basis: 86.5rem;
fb-347
flex-basis: 86.75rem;
fb-348
flex-basis: 87rem;
fb-349
flex-basis: 87.25rem;
fb-350
flex-basis: 87.5rem;
fb-351
flex-basis: 87.75rem;
fb-352
flex-basis: 88rem;
fb-353
flex-basis: 88.25rem;
fb-354
flex-basis: 88.5rem;
fb-355
flex-basis: 88.75rem;
fb-356
flex-basis: 89rem;
fb-357
flex-basis: 89.25rem;
fb-358
flex-basis: 89.5rem;
fb-359
flex-basis: 89.75rem;
fb-360
flex-basis: 90rem;
fb-361
flex-basis: 90.25rem;
fb-362
flex-basis: 90.5rem;
fb-363
flex-basis: 90.75rem;
fb-364
flex-basis: 91rem;
fb-365
flex-basis: 91.25rem;
fb-366
flex-basis: 91.5rem;
fb-367
flex-basis: 91.75rem;
fb-368
flex-basis: 92rem;
fb-369
flex-basis: 92.25rem;
fb-370
flex-basis: 92.5rem;
fb-371
flex-basis: 92.75rem;
fb-372
flex-basis: 93rem;
fb-373
flex-basis: 93.25rem;
fb-374
flex-basis: 93.5rem;
fb-375
flex-basis: 93.75rem;
fb-376
flex-basis: 94rem;
fb-377
flex-basis: 94.25rem;
fb-378
flex-basis: 94.5rem;
fb-379
flex-basis: 94.75rem;
fb-380
flex-basis: 95rem;
fb-381
flex-basis: 95.25rem;
fb-382
flex-basis: 95.5rem;
fb-383
flex-basis: 95.75rem;
fb-384
flex-basis: 96rem;
fb-auto
flex-basis: auto;
fb-100%
flex-basis: 100%;
fb-50%
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)