tiny-flex

Flexbox layout for the modern web

Installation

Via npm

npm i tiny-flex

or

yarn add tiny-flex

// 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.

Via 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>

Usage

<flex-container>
  <flex-item>Hello</flex-item>
  <flex-item>world</flex-item>
</flex-container>

flex-container accepts the following optional attributes:

• direction
• align-items
• justify-content
• align-content
• wrap
• flow
• gap
• row-gap
• column-gap

flex-item accepts the following optional attributes:

• flex
• grow
• shrink
• basis
• order
• align-self

Demo

See it running in action in this demo.

License

MIT Copyright Maroun Baydoun.