solid-flex


Flexbox elements
for Solid JS.

!image

``jsx



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.