Advanced Flexbox Made Simple

50+ powerful SCSS mixins and CSS utilities for modern, responsive layouts

View Documentation Get Started

Powerful Features

Everything you need to build modern layouts

50+ Mixins

Comprehensive collection of flexbox mixins covering every use case from simple centering to complex layouts.

Fully Responsive

Built-in responsive mixins and breakpoints ensure your layouts work perfectly on all devices.

Production Ready

Battle-tested utilities used in production environments. Lightweight with zero dependencies.

Easy to Use

Intuitive API with clear naming conventions. Get started in minutes with our comprehensive docs.

Modern CSS

Leverages modern CSS features like gap, clamp(), and container queries for optimal performance.

Framework Agnostic

Works with any framework or vanilla CSS. Use as SCSS mixins or compiled CSS classes.

Layout Examples

See what you can build with Mastors Flexer

Centered Content

Perfectly Centered

Use .flex-center for instant centering

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

Space Between Layout

Logo

Link 1 Link 2 Link 3
<div class="flex-between"> <div>Logo</div> <nav>Navigation</nav> </div>

Media Object Pattern

John Doe

This is an example of the classic media object pattern. Perfect for comments, user profiles, and news items.

Jane Smith

The media object is one of the most useful flexbox patterns for real-world layouts.

<div class="flex-media"> <div class="media-image">Avatar</div> <div class="media-content">Content</div> </div>

Responsive Grid (3 Columns)

Column 1

Automatically responsive grid that stacks on mobile.

Column 2

Equal width columns with consistent gaps.

Column 3

Works perfectly on all screen sizes.

<div class="flex-grid-3"> <div>Column 1</div> <div>Column 2</div> <div>Column 3</div> </div>

Getting Started

Start using Mastors Flexer in your project

Via CDN

Add this link to your HTML:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/KEHEM-IT/Mastors-Flexer@main/mastors-flexer.css">

Via NPM

Install the package:

npm i mastors-flexer

Then import in your SCSS:

@use "mastors-flexer/mastors-flexer" as *;

Example Usage

// Center content .hero { @include flex-center; min-height: 400px; } // Responsive sidebar .layout { @include flex-sidebar-responsive(300px, 2rem, 768px); } // Card grid .products { @include flex-cards(300px, 2rem); }