Syntax

Flex Basis

Setting the initial main size of a flex item.

🚧This page is still under construction and some content may not be complete.

Overview

ClassDeclarations
flex-basis:basisflex-basis: basis;
flex-basis:fullflex-basis: 100%;
flex-basis:fitflex-basis: fit-content;
flex-basis:maxflex-basis: max-content;
flex-basis:maxflex-basis: max-content;
flex-basis:3xs / flex-basis:360flex-basis: 3xs;
flex-basis:2xs / flex-basis:480flex-basis: 2xs;
flex-basis:xs / flex-basis:600flex-basis: xs;
flex-basis:sm / flex-basis:768flex-basis: sm;
flex-basis:md / flex-basis:1024flex-basis: md;
flex-basis:lg / flex-basis:1280flex-basis: lg;
flex-basis:xl / flex-basis:1440flex-basis: xl;
flex-basis:2xl / flex-basis:1600flex-basis: 2xl;
flex-basis:3xl / flex-basis:1920flex-basis: 3xl;
flex-basis:4xl / flex-basis:2560flex-basis: 4xl;

Conditionally apply

Apply styles based on different states using selectors and applying conditionally.

<div class="flex-basis:full:hover flex-basis:full@sm flex-basis:full@dark flex-basis:full@print">…</div>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.
MIT License