#Borders
import { flexSystem } from "@poodle/system";
flex
system support CSS Flexbox.
const listSystem = compose(flexSystem);export const system = createSystem(listSystem);const styles = system({alignItems: "flex-start",justifySelf: "center",});// Styles result// { alignItems: "flex-start" },// { justifySelf: "center" },
Prop | Type | Description |
---|---|---|
alignContent | ResponsiveProp<CSS.Property.AlignContent> | The CSS align-content property |
alignItems | ResponsiveProp<CSS.Property.AlignItems> | The CSS align-items property |
alignSelf | ResponsiveProp<CSS.Property.AlignSelf> | The CSS align-self property |
flex | ResponsiveProp<CSS.Property.Flex> | The CSS flex property |
flexBasis | ResponsiveProp<CSS.Property.FlexBasis \| number \| string> | The CSS flex-basis property |
flexDir | ResponsiveProp<CSS.Property.FlexDirection> | The CSS flex-direction property |
flexDirection | ResponsiveProp<CSS.Property.FlexDirection> | The CSS flex-direction property |
flexGrow | ResponsiveProp<CSS.Property.FlexGrow> | The CSS flex-grow property |
flexShrink | ResponsiveProp<CSS.Property.FlexShrink> | The CSS flex-shrink property |
flexWrap | ResponsiveProp<CSS.Property.FlexWrap> | The CSS flex-wrap property |
justifyContent | ResponsiveProp<CSS.Property.JustifyContent> | The CSS justify-content property |
justifyItems | ResponsiveProp<CSS.Property.JustifyItems> | The CSS justify-items property |
justifySelf | ResponsiveProp<CSS.Property.JustifySelf> | The CSS justify-self property |
order | ResponsiveProp<CSS.Property.Order> | The CSS order property |