tiny-flex

    1.0.0 • Public • Published

    tiny-flex

    Flexbox layout for the modern web

    npm version

    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.

    Install

    npm i tiny-flex

    DownloadsWeekly Downloads

    3

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    13.1 kB

    Total Files

    8

    Last publish

    Collaborators

    • maroun-baydoun