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.

Class	Declarations
`flex-basis:basis`	`flex-basis: 1037.91229928237rem;`
`flex-basis:full`	`flex-basis: 100%;`
`flex-basis:fit`	`flex-basis: fit-content;`
`flex-basis:max`	`flex-basis: max-content;`
`flex-basis:max`	`flex-basis: max-content;`
`flex-basis:3xs`	`flex-basis: 3xs;`
`flex-basis:2xs`	`flex-basis: 2xs;`
`flex-basis:xs`	`flex-basis: xs;`
`flex-basis:sm`	`flex-basis: sm;`
`flex-basis:md`	`flex-basis: md;`
`flex-basis:lg`	`flex-basis: lg;`
`flex-basis:xl`	`flex-basis: xl;`
`flex-basis:2xl`	`flex-basis: 2xl;`
`flex-basis:3xl`	`flex-basis: 3xl;`
`flex-basis:4xl`	`flex-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>

Setting how flex items grow or shrink.

Setting the direction of flex items.

© Aoyue Design LLC.