flex elements for solid js
npm install solid-flexjsx
selfStretch
column
spaceBetween
alignEnd
gap="16px"
grow={2}
>
`
Live Example
Tl;dr
You don't know CSS Flexbox?
Read here!
2 components:
-
- creates a flex container.
- provides EVERY Flexbox property.
-
- creates a flexed item.
- provides Flexbox properties for items only.
3 ways to set properties:
- flags (row, start, stretch, ecc...)
- classic properties (display, flexDirection, justifyContent, ecc...)
- short version of classic properties (justify, align, self, ecc...)
Install
`shell
Install via NPM
npm i solid-flex
or Yarn
yarn add solid-flex
`
Usage
Every Flexbox property can be set via one or more dedicated props.
$3
This first set of props refers to "flex container" related properties. For this reason they are only available for the
component Flex.
#### display
| props | type | value |
| --- | --- | --- |
| / | / | flex (default) |
| inline | boolean | inline-flex |
| display | string | any |
`jsx
<>
// flex
// inline-flex
// inline-flex
>
`
#### flex-direction
| props | type | value |
| --- | --- | --- |
| row | boolean | row (default) |
| col or column | boolean | column |
| rowReverse | boolean | row-reverse |
| colReverse or columnReverse | boolean | column-reverse |
| direction or flexDirection | string | any |
`jsx
<>
// row
// column
// column
// row-reverse
// column-reverse
// column-reverse
// column-reverse
// column-reverse
>
`
The additional reverse prop can be used to programmatically revert the specified direction:
| prop | type |
| --- | --- |
| reverse | boolean |
`jsx
<>
// row-reverse
// row-reverse
// row
>
`
#### flex-wrap
| props | type | value |
| --- | --- | --- |
| nowrap | boolean | nowrap (default) |
| wrap | boolean | wrap |
| wrapReverse | boolean | wrap-reverse |
| wrap or flexWrap | string | any |
`jsx
<>
// wrap
// nowrap
// wrap-reverse
// wrap
// nowrap
// wrap-reverse
// wrap-reverse
>
`
#### justify-content
| props | type | value |
| --- | --- | --- |
| start | boolean | flex-start (default) |
| end | boolean | flex-end |
| center | boolean | center |
| spaceBetween | boolean | space-between |
| spaceAround | boolean | space-around |
| spaceEvenly | boolean | space-evenly |
| justify or justifyContent | string | any |
`jsx
<>
// flex-start
// flex-end
// center
// space-between
// space-around
// space-evenly
// space-beetween
// space-beetween
>
`
#### align-items
| props | type | value |
| --- | --- | --- |
| alignStart | boolean | flex-start |
| alignEnd | boolean | flex-end |
| alignCenter | boolean | center (default) |
| stretch or alignStretch | boolean | stretch |
| baseline or alignBaseline | boolean | baseline |
| align or alignItems | string | any |
`jsx
<>
// flex-start
// flex-end
// center
// stretch
// baseline
// flex-end
// flex-end
>
`
#### align-content
| props | type | value |
| --- | --- | --- |
| contentStart | boolean | flex-start |
| contentEnd | boolean | flex-end |
| contentCenter | boolean | center |
| contentStretch | boolean | stretch |
| contentBaseline | boolean | baseline |
| alignContent | string | any |
`jsx
<>
// flex-start
// flex-end
// center
// stretch
// space-between
// space-around
// flex-end
>
`
#### row-gap
| props | type | value |
| --- | --- | --- |
| rowGap | string | any |
`jsx
<>
// 10px
>
`
#### column-gap
| props | type | value |
| --- | --- | --- |
| colGap or columnGap | string | any |
`jsx
<>
// 10px
// 10px
>
`
#### gap
| props | type | value |
| --- | --- | --- |
| gap | string | any |
`jsx
<>
// 10px
// 10px 20px
>
`
$3
The set of props below refers to "flex items" related properties. They are all available for both Flex and FlexItem
components.
#### order
| props | type | value |
| --- | --- | --- |
| order | number or string | any |
`jsx
<>
// 3
// 3
>
`
#### flex-grow
| props | type | value |
| --- | --- | --- |
| grow or flexGrow | booolean or number or string | / |
`jsx
<>
// 1
// 1
// 0
// 3
// 3
// 3
// 3
>
`
#### flex-shrink
| props | type | value |
| --- | --- | --- |
| shrink or flexShrink | booolean or number or string | / |
`jsx
<>
// 1
// 1
// 0
// 3
// 3
// 3
// 3
>
`
#### flex-basis
| props | type | value |
| --- | --- | --- |
| basis or flexBasis | string | / |
`jsx
<>
// 10px
// 10px
>
`
#### align-self
| props | type | value |
| --- | --- | --- |
| selfStart | boolean | flex-start |
| selfEnd | boolean | flex-end |
| selfCenter | boolean | center |
| selfStretch | boolean | stretch |
| selfBaseline | boolean | baseline |
| self or alignSelf | string | / |
`jsx
<>
// flex-start
// flex-end
// center
// stretch
// baseline
// flex-end
// flex-end
<>
`
$3
By default, both Flex and FlexItem components renders a div element with the specified flex properties.
Nevertheless, it is possible to change this behaviour via the as prop:
| props | type |
| --- | --- |
| as | string or Component |
Examples:
`jsx
<>
>
`
In addition, any additional prop passed to Flex or FlexItem will be drilled down to the render element or component.
#### Basic usage
`jsx
`
#### Usage with a different element
`jsx
`
#### Usage with a custom component
`jsx
const MyComp = (props) => (
{props.children}
)
return (
)
`
Components
$3
Use it to create a flexible container.
`jsx
Hello world!
`
By default, it renders a div element with the following CSS properties set:
`css
display: flex;
align-items: center;
`
It provides all the properties listed above.
$3
Use it to create a flexible item.
`jsx
Hello world!
`
By default, it renders a div element, but it does not set any CSS property.
Lastly, it provides only props related to order, flex-grow, flex-shrink,
flex-basis and align-self` properties.