tiny-flex

Flexbox layout for the modern web

Install npm package

npm i tiny-flex
Or
yarn add tiny-flex

Import the components:

// Import all the components
import "tiny-flex";

// Import the container component only
import "tiny-flex/components/container";

The code shipped in the package is ES2015. If you are targeting unsupported browsers, make sure you transpile it in your project.

Include from CDN

<!-- Import all components -->
<script
    type="module"
    src="//unpkg.com/tiny-flex@insert-version-here/components/index.js"
></script>

<!-- Import the container component only -->
<script
    type="module"
    src="//unpkg.com/tiny-flex@insert-version-here/components/container.js"
></script>

Use

<flex-container>
    <flex-item>Hello</flex-item>
    <flex-item>world</flex-item>
</flex-container>
flex-container accepts the following optional attributes:
flex-item accepts the following optional attributes:

Demo

Defaults

tinyflexwebcomponents
View code
<flex-container>
    <flex-item>tiny</flex-item>
    <flex-item>flex</flex-item>
    <flex-item>web</flex-item>
    <flex-item>components</flex-item>
</flex-container>

Column

tinyflexwebcomponents
View code
<flex-container direction="column">
    <flex-item>tiny</flex-item>
    <flex-item>flex</flex-item>
    <flex-item>web</flex-item>
    <flex-item>components</flex-item>
</flex-container>

Reverse column

tinyflexwebcomponents
View code
<flex-container direction="column-reverse">
    <flex-item>tiny</flex-item>
    <flex-item>flex</flex-item>
    <flex-item>web</flex-item>
    <flex-item>components</flex-item>
</flex-container>

Content justified to flex-end

tinyflexwebcomponents
View code
<flex-container justify-content="flex-end">
    <flex-item>tiny</flex-item>
    <flex-item>flex</flex-item>
    <flex-item>web</flex-item>
    <flex-item>components</flex-item>
</flex-container>

Items aligned to the center

tinyflexwebcomponents
View code
<flex-container direction="column" align-items="center">
    <flex-item>tiny</flex-item>
    <flex-item>flex</flex-item>
    <flex-item>web</flex-item>
    <flex-item>components</flex-item>
</flex-container>

Item with flex 1

tinyflexwebcomponents
View code
<flex-container direction="column">
    <flex-item>tiny</flex-item>
    <flex-item flex="1">flex</flex-item>
    <flex-item>web</flex-item>
    <flex-item>components</flex-item>
</flex-container>

Item self aligned to flex-end

tinyflexwebcomponents
View code
<flex-container direction="column" align-items="center">
    <flex-item>tiny</flex-item>
    <flex-item align-self="flex-end">flex</flex-item>
    <flex-item>web</flex-item>
    <flex-item>components</flex-item>
</flex-container>

Items with different orders

tinyflexwebcomponents
View code
<flex-container>
    <flex-item order="2">tiny</flex-item>
    <flex-item order="1">flex</flex-item>
    <flex-item order="4">web</flex-item>
    <flex-item order="3">components</flex-item>
</flex-container>

Learn more

See other projects