flexalign-css

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/flexalign-css@1.0.0/flexalign.css">

<!-- Minified version (recommended for production) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/swapnilddixit91/flexalign-css@1.0.0/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.