FlexAlign.css

A lightweight, zero-dependency CSS utility library for flexbox alignment. Easily align and distribute items in your layouts with simple, intuitive class names.

Features

• 🚀 Lightweight (less than 1KB minified)
• 📦 Zero dependencies
• 🎯 Simple and intuitive class names
• 🔧 Covers all flexbox alignment properties
• 📱 Works with any framework or vanilla HTML
• 🎨 Easy to integrate into existing projects

Installation

CDN

Include FlexAlign.css in your HTML using a CDN:

<!-- Full version -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/swapnilddixit91/[email protected]/flexalign.css">

<!-- Minified version (recommended for production) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/swapnilddixit91/[email protected]/flexalign.min.css">

NPM

Install via npm:

npm install flexalign-css

Then import in your CSS or JavaScript:

@import 'flexalign-css';

import 'flexalign-css';

Download

Download the flexalign.css or flexalign.min.css file and include it in your project:

<link rel="stylesheet" href="path/to/flexalign.min.css">

Usage

Basic Setup

Add the flex class to enable flexbox on a container, then use alignment utilities:

<div class="flex justify-center align-center">
  <div>Centered content</div>
</div>

Class Reference

Display

| Class | CSS Property | |-------|-------------| | .flex | display: flex | | .flex-inline | display: inline-flex |

Justify Content (Horizontal Alignment)

| Class | CSS Property | Description | |-------|-------------|-------------| | .justify-start | justify-content: flex-start | Align items to the left (start) | | .justify-end | justify-content: flex-end | Align items to the right (end) | | .justify-center | justify-content: center | Center items horizontally | | .justify-between | justify-content: space-between | Equal spacing between items | | .justify-around | justify-content: space-around | Equal spacing around items | | .justify-evenly | justify-content: space-evenly | Equal spacing between and around items |

Align Items (Vertical Alignment)

| Class | CSS Property | Description | |-------|-------------|-------------| | .align-start | align-items: flex-start | Align items to the top (start) | | .align-end | align-items: flex-end | Align items to the bottom (end) | | .align-center | align-items: center | Center items vertically | | .align-stretch | align-items: stretch | Stretch items to fill container | | .align-baseline | align-items: baseline | Align items by their baseline |

Flex Direction

| Class | CSS Property | Description | |-------|-------------|-------------| | .flex-row | flex-direction: row | Horizontal direction (default) | | .flex-row-reverse | flex-direction: row-reverse | Horizontal, reversed | | .flex-column | flex-direction: column | Vertical direction | | .flex-column-reverse | flex-direction: column-reverse | Vertical, reversed |

Flex Wrap

| Class | CSS Property | Description | |-------|-------------|-------------| | .flex-wrap | flex-wrap: wrap | Allow items to wrap | | .flex-nowrap | flex-wrap: nowrap | Prevent wrapping (default) | | .flex-wrap-reverse | flex-wrap: wrap-reverse | Wrap in reverse order |

Examples

Center Everything

<div class="flex justify-center align-center" style="height: 300px;">
  <div>Perfectly centered!</div>
</div>

Space Between with Vertical Center

<div class="flex justify-between align-center">
  <div>Left</div>
  <div>Middle</div>
  <div>Right</div>
</div>

Column Layout

<div class="flex flex-column align-center">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Responsive Card Grid

<div class="flex flex-wrap justify-around">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

Browser Support

FlexAlign.css works in all modern browsers that support flexbox:

• Chrome 29+
• Firefox 28+
• Safari 9+
• Edge 12+
• Opera 17+

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License - see the LICENSE file for details.

Changelog

Version 1.0.0

• Initial release
• Core flexbox alignment utilities
• Justify content classes
• Align items classes
• Flex direction and wrap classes

Credits

Created and maintained by the FlexAlign CSS community.