Flex

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.

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

Style syntax for setting the direction of flex items.

MIT License © Aoyue Design LLC.

Issue on this page