https://github.com/rizo/align.css

Align things in CSS
https://github.com/rizo/align.css

Last synced: 23 days ago
JSON representation

Align things in CSS

• Host: GitHub
• URL: https://github.com/rizo/align.css
• Owner: rizo
• License: mit
• Created: 2024-10-10T15:18:35.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-10-10T15:32:07.000Z (3 months ago)
• Last Synced: 2024-12-15T07:52:09.779Z (25 days ago)
• Language: HTML
• Homepage: https://rizo.github.io/align.css/
• Size: 6.84 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# align.css

Natural, consistent, memorable CSS classe for aligning things in CSS.

**Demo**: https://rizo.github.io/align.css/

## Installation

Just put this in your CSS file:

```css

/* Container */

.row { display: flex; flex-direction: row;    }

.col { display: flex; flex-direction: column; }

/* Align */

.row.left,   .col.top    { justify-content: flex-start; }

.row.center, .col.middle { justify-content: center;     }

.row.right,  .col.bottom { justify-content: flex-end;   }

.row.top,    .col.left   { align-items: flex-start;     }

.row.middle, .col.center { align-items: center;         }

.row.bottom, .col.right  { align-items: flex-end;       }

/* Justify */

.row.between, .col.between { justify-content: space-between; }

.row.even,    .col.even    { justify-content: space-evenly;  }

.row.around,  .col.around  { justify-content: space-around;  }

```