Flex Basis

Style syntax for setting the initial main size of a flex item.

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

Overview [sr-only]

flex-basis:basisflex-basis: basis
flex-basis:fullflex-basis: size%
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: 30rem
flex-basis:2xs / flex-basis:480flex-basis: 37.5rem
flex-basis:xs / flex-basis:600flex-basis: 48rem
flex-basis:sm / flex-basis:768flex-basis: 52.125rem
flex-basis:md / flex-basis:1024flex-basis: 64rem
flex-basis:lg / flex-basis:1280flex-basis: 80rem
flex-basis:xl / flex-basis:1440flex-basis: 90rem
flex-basis:2xl / flex-basis:1600flex-basis: sizerem
flex-basis:3xl / flex-basis:1920flex-basis: 120rem
flex-basis:4xl / flex-basis:2560flex-basis: 160rem

Conditionally apply

Apply styles in different states using selectors, media queries, etc.

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

Style syntax for setting how flex items grow or shrink.

Flex Direction

Style syntax for setting the direction of flex items.

MIT License © Aoyue Design LLC.