Skip to content
Yumma CSS Logo Yumma CSS Logo Yumma CSS
Blog

Flex Basis

Controls the initial size of flex elements.

Class Properties

fb-0

flex-basis: 0rem;

fb-1

flex-basis: 1rem;

fb-2

flex-basis: 2rem;

fb-3

flex-basis: 3rem;

fb-4

flex-basis: 4rem;

fb-5

flex-basis: 5rem;

fb-6

flex-basis: 6rem;

fb-7

flex-basis: 7rem;

fb-8

flex-basis: 8rem;

fb-9

flex-basis: 9rem;

fb-10

flex-basis: 10rem;

fb-11

flex-basis: 11rem;

fb-12

flex-basis: 12rem;

fb-13

flex-basis: 13rem;

fb-14

flex-basis: 14rem;

fb-15

flex-basis: 15rem;

fb-16

flex-basis: 16rem;

fb-17

flex-basis: 17rem;

fb-18

flex-basis: 18rem;

fb-19

flex-basis: 19rem;

fb-20

flex-basis: 20rem;

fb-21

flex-basis: 21rem;

fb-22

flex-basis: 22rem;

fb-23

flex-basis: 23rem;

fb-24

flex-basis: 24rem;

fb-25

flex-basis: 25rem;

fb-26

flex-basis: 26rem;

fb-27

flex-basis: 27rem;

fb-28

flex-basis: 28rem;

fb-29

flex-basis: 29rem;

fb-30

flex-basis: 30rem;

fb-31

flex-basis: 31rem;

fb-32

flex-basis: 32rem;

fb-33

flex-basis: 33rem;

fb-34

flex-basis: 34rem;

fb-35

flex-basis: 35rem;

fb-36

flex-basis: 36rem;

fb-37

flex-basis: 37rem;

fb-38

flex-basis: 38rem;

fb-39

flex-basis: 39rem;

fb-40

flex-basis: 40rem;

fb-41

flex-basis: 41rem;

fb-42

flex-basis: 42rem;

fb-43

flex-basis: 43rem;

fb-44

flex-basis: 44rem;

fb-45

flex-basis: 45rem;

fb-46

flex-basis: 46rem;

fb-47

flex-basis: 47rem;

fb-48

flex-basis: 48rem;

fb-49

flex-basis: 49rem;

fb-50

flex-basis: 50rem;

fb-51

flex-basis: 51rem;

fb-52

flex-basis: 52rem;

fb-53

flex-basis: 53rem;

fb-54

flex-basis: 54rem;

fb-55

flex-basis: 55rem;

fb-56

flex-basis: 56rem;

fb-57

flex-basis: 57rem;

fb-58

flex-basis: 58rem;

fb-59

flex-basis: 59rem;

fb-60

flex-basis: 60rem;

fb-61

flex-basis: 61rem;

fb-62

flex-basis: 62rem;

fb-63

flex-basis: 63rem;

fb-64

flex-basis: 64rem;

fb-65

flex-basis: 65rem;

fb-66

flex-basis: 66rem;

fb-67

flex-basis: 67rem;

fb-68

flex-basis: 68rem;

fb-69

flex-basis: 69rem;

fb-70

flex-basis: 70rem;

fb-71

flex-basis: 71rem;

fb-72

flex-basis: 72rem;

fb-73

flex-basis: 73rem;

fb-74

flex-basis: 74rem;

fb-75

flex-basis: 75rem;

fb-76

flex-basis: 76rem;

fb-77

flex-basis: 77rem;

fb-78

flex-basis: 78rem;

fb-79

flex-basis: 79rem;

fb-80

flex-basis: 80rem;

fb-81

flex-basis: 81rem;

fb-82

flex-basis: 82rem;

fb-83

flex-basis: 83rem;

fb-84

flex-basis: 84rem;

fb-85

flex-basis: 85rem;

fb-86

flex-basis: 86rem;

fb-87

flex-basis: 87rem;

fb-88

flex-basis: 88rem;

fb-89

flex-basis: 89rem;

fb-90

flex-basis: 90rem;

fb-91

flex-basis: 91rem;

fb-92

flex-basis: 92rem;

fb-93

flex-basis: 93rem;

fb-94

flex-basis: 94rem;

fb-95

flex-basis: 95rem;

fb-96

flex-basis: 96rem;

fb-97

flex-basis: 97rem;

fb-98

flex-basis: 98rem;

fb-99

flex-basis: 99rem;

fb-100

flex-basis: 100rem;

fb-auto

flex-basis: auto;

fb-fc

flex-basis: fit-content;

fb-full

flex-basis: 100%;

fb-half

flex-basis: 50%;

fb-max

flex-basis: max-content;

fb-min

flex-basis: min-content;

Using breakpoints

Using responsive breakpoints like sm:fb-*, md:fb-*, lg:fb-*, and xxl:fb-* allows targeting specific utilities in different viewports.

<div class="fb-1 md:fb-2 ..."></div>

Using variants

Using :hover variants such as h:fb-* allows you to override elements and change their values when hovering over them.

<div class="fb-1 h:fb-2 ..."></div>