Package Exports

svelte-flex

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (svelte-flex) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

svelte-flex

💪 A simple and reusable flexbox component for Svelte.

A simple and reusable flexbox component for Svelte.

Sane defaults.
Simple API.
Reactive props.
Minimal size.

Try me on CodeSandbox!

Installation

This package is available on NPM, and you can install it with npm or yarn:

npm install svelte-flex

yarn add svelte-flex

Usage

Import the Flex component and use it in your Svelte project.

<script>
  import Flex from 'svelte-flex';
</script>

<Flex>
  <div>Flexbox child!</div>
  <div>Flexbox child!</div>
  <div>Flexbox child!</div>
</Flex>

Props

All props are optional (as they all have default values).

Prop	Possible Values	Default Value
`direction`	`'row'` \| `'column'`	`'row'`
`align`	`'start'` \| `'center'` \| `'end'` \| `'stretch'`	`'center'`
`justify`	`'start'` \| `'center'` \| `'end'` \| `'around'` \| `'between'` \| `'evenly'`	`'center'`
`reverse`	`true` \| `false`	`false`

Check out the test suite if you're unsure what CSS styles are applied by these props.

The props are reactive, meaning that if they are dynamically updated, the component will update in response.

Contributing

Feel free to file an issue or open a pull request. Ensure that you add tests for any new functionality.

👌 Built by Dave Lunny.