MonorailCss

Flex Basis

Utilities for controlling the initial size of flex items.

Class CSS Output
basis-auto 
flex-basis: auto;
}
basis-full 
flex-basis: 100%;
}
basis-1/2 
flex-basis: calc(1/2 * 100%);
}
basis-1/3 
flex-basis: calc(1/3 * 100%);
}
basis-min 
flex-basis: min-content;
}
basis-max 
flex-basis: max-content;
}
basis-fit 
flex-basis: fit-content;
}
basis-0 
flex-basis: calc(var(--spacing) * 0);
}
basis-[200px] 
flex-basis: 200px;
}

basis-auto

flex-basis: auto;

basis-full

flex-basis: 100%;

basis-1/2

flex-basis: calc(1/2 * 100%);

basis-1/3

flex-basis: calc(1/3 * 100%);

basis-min

flex-basis: min-content;

basis-max

flex-basis: max-content;

basis-fit

flex-basis: fit-content;

basis-0

flex-basis: calc(var(--spacing) * 0);

basis-[200px]

flex-basis: 200px;

Reference

flex-basis MDN ↗

CSS Properties

  • flex-basis