Mastors-Flexer

Comprehensive SCSS Flexbox System - Professional-grade flexbox mixins for modern web layouts.

A powerful, flexible, and production-ready SASS flexbox utility library that provides everything you need to build responsive, complex layouts with ease using CSS Flexbox.

📋 Table of Contents

Installation
Quick Start
Flexbox Mixins Overview
Quick Reference Table
Detailed Documentation
Usage Examples
Best Practices
Browser Support
FAQ

🚀 Installation

Via CDN (Recommended for Quick Start)

Add this link in your HTML <head>:

<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 file:

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

Or with a custom namespace:

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

// Usage: @include flex.flex-center;

Manual Installation

Download _mastors-flexer.scss and import it:

@import "path/to/mastors-flexer";

⚡ Quick Start

// Centered content
.hero {
  @include flex-center;
  min-height: 400px;
}

// Space between layout
.header {
  @include flex-between(center);
  padding: 1rem 2rem;
}

// Responsive sidebar
.layout {
  @include flex-sidebar-responsive(300px, 2rem, 768px);
}

// Flex cards
.products {
  @include flex-cards(300px, 2rem);
}

// Equal width columns
.columns {
  @include flex-equal(1rem);
}

🎯 Flexbox Mixins Overview

Category	Count	Mixins
Core Flex	6	`flex`, `flex-row`, `flex-col`, `flex-row-reverse`, `flex-col-reverse`, `flex-inline`
Alignment	9	`flex-center`, `flex-align`, `flex-between`, `flex-around`, `flex-evenly`, etc.
Flex Items	8	`flex-item`, `flex-grow`, `flex-shrink`, `flex-basis`, `flex-order`, etc.
Layouts	8	`flex-sidebar`, `flex-holy-grail`, `flex-navbar`, `flex-footer`, `flex-media`, etc.
Responsive	4	`flex-responsive`, `flex-stack`, `flex-sidebar-responsive`, etc.
Advanced	15	`flex-grid`, `flex-cards`, `flex-clamp`, `flex-distribute`, `flex-masonry`, etc.

Total: 50+ Mixins 🎉

📊 Quick Reference Table

Core Flex Mixins

Mixin	Parameters	Defaults	Usage Example
`flex`	`$direction`, `$wrap`, `$gap`	`row`, `nowrap`, `0`	`@include flex(row, wrap, 1rem);`
`flex-row`	`$gap`, `$wrap`	`0`, `nowrap`	`@include flex-row(1rem, wrap);`
`flex-col`	`$gap`, `$wrap`	`0`, `nowrap`	`@include flex-col(2rem);`
`flex-row-reverse`	`$gap`	`0`	`@include flex-row-reverse(1rem);`
`flex-col-reverse`	`$gap`	`0`	`@include flex-col-reverse(1.5rem);`
`flex-inline`	`$gap`	`0.5rem`	`@include flex-inline(0.5rem);`

Alignment Mixins

Mixin	Parameters	Defaults	Usage Example
`flex-center`	none	-	`@include flex-center;`
`flex-align`	`$justify`, `$align`	`flex-start`, `stretch`	`@include flex-align(center, start);`
`flex-between`	`$align`	`center`	`@include flex-between(center);`
`flex-around`	`$align`	`center`	`@include flex-around(start);`
`flex-evenly`	`$align`	`center`	`@include flex-evenly(stretch);`
`flex-start`	`$align`	`stretch`	`@include flex-start(center);`
`flex-end`	`$align`	`stretch`	`@include flex-end(center);`
`flex-v-center`	none	-	`@include flex-v-center;`
`flex-h-center`	none	-	`@include flex-h-center;`

Flex Item Mixins

Mixin	Parameters	Defaults	Usage Example
`flex-item`	`$grow`, `$shrink`, `$basis`	`0`, `1`, `auto`	`@include flex-item(1, 0, 50%);`
`flex-grow`	`$value`	`1`	`@include flex-grow(2);`
`flex-shrink`	`$value`	`1`	`@include flex-shrink(0);`
`flex-basis`	`$value`	required	`@include flex-basis(300px);`
`flex-order`	`$order`	`0`	`@include flex-order(-1);`
`flex-self`	`$align`	`auto`	`@include flex-self(center);`
`flex-fill`	none	-	`@include flex-fill;`
`flex-none`	none	-	`@include flex-none;`

Layout Pattern Mixins

Mixin	Parameters	Defaults	Usage Example
`flex-sidebar`	`$width`, `$gap`, `$position`	`300px`, `1rem`, `left`	`@include flex-sidebar(250px, 2rem, left);`
`flex-sidebar-responsive`	`$width`, `$gap`, `$breakpoint`, `$position`	`300px`, `1rem`, `768px`, `left`	`@include flex-sidebar-responsive(280px, 1.5rem, 768px);`
`flex-holy-grail`	`$sidebar-width`, `$gap`	`250px`, `1rem`	`@include flex-holy-grail(200px, 1rem);`
`flex-navbar`	`$gap`, `$breakpoint`	`2rem`, `768px`	`@include flex-navbar(2rem, 768px);`
`flex-footer`	`$gap`, `$breakpoint`	`2rem`, `768px`	`@include flex-footer(2rem, 768px);`
`flex-media`	`$image-width`, `$gap`	`100px`, `1rem`	`@include flex-media(64px, 1rem);`
`flex-sticky-footer`	none	-	`@include flex-sticky-footer;`
`flex-fullscreen-center`	none	-	`@include flex-fullscreen-center;`

Responsive Mixins

Mixin	Parameters	Defaults	Usage Example
`flex-responsive`	`$breakpoint`, `$gap`	`768px`, `1rem`	`@include flex-responsive(768px, 2rem);`
`flex-stack`	`$breakpoint`, `$gap`	`768px`, `1rem`	`@include flex-stack(1024px, 1.5rem);`
`flex-reverse-responsive`	`$breakpoint`, `$gap`	`768px`, `1rem`	`@include flex-reverse-responsive(768px);`
`flex-wrap`	`$gap`, `$justify`	`1rem`, `flex-start`	`@include flex-wrap(2rem, center);`

Advanced Flex Mixins

Mixin	Parameters	Defaults	Usage Example
`flex-cards`	`$min-width`, `$gap`, `$justify`	`280px`, `1.5rem`, `flex-start`	`@include flex-cards(300px, 2rem);`
`flex-grid`	`$cols`, `$gap`	`3`, `1rem`	`@include flex-grid(4, 1.5rem);`
`flex-multirow`	`$items-per-row`, `$gap`	`3`, `1rem`	`@include flex-multirow(4, 2rem);`
`flex-equal`	`$gap`	`1rem`	`@include flex-equal(2rem);`
`flex-asymmetric`	`$ratio`, `$gap`	`2`, `1rem`	`@include flex-asymmetric(3, 1.5rem);`
`flex-clamp`	`$min`, `$preferred`, `$max`, `$gap`	`300px`, `50%`, `500px`, `1rem`	`@include flex-clamp(280px, 45%, 600px);`
`flex-distribute`	`$gap`	`1rem`	`@include flex-distribute(1.5rem);`
`flex-min-wrap`	`$gap`	`1rem`	`@include flex-min-wrap(0.5rem);`
`flex-intrinsic-center`	none	-	`@include flex-intrinsic-center;`
`flex-container-aware`	`$gap`	`1rem`	`@include flex-container-aware(1.5rem);`
`flex-gap-fallback`	`$gap`	`1rem`	`@include flex-gap-fallback(1rem);`

📖 Detailed Documentation

Core Flex Mixins

`@mixin flex($direction, $wrap, $gap)`

The base flex mixin for creating flex containers with full control.

Parameters:

$direction: Flex direction - row, column, row-reverse, column-reverse (default: row)
$wrap: Flex wrap behavior - wrap, nowrap, wrap-reverse (default: nowrap)
$gap: Gap between flex items (default: 0)

Use case: Complete control over flex container behavior

.container {
  @include flex(row, wrap, 1rem);
}

// Compiles to:
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
}

`@mixin flex-row($gap, $wrap)`

Creates a flex container with row direction.

Parameters:

$gap: Gap between items (default: 0)
$wrap: Wrap behavior (default: nowrap)

.header {
  @include flex-row(2rem, wrap);
}

`@mixin flex-col($gap, $wrap)`

Creates a flex container with column direction.

Parameters:

$gap: Gap between items (default: 0)
$wrap: Wrap behavior (default: nowrap)

.sidebar {
  @include flex-col(1rem);
}

Alignment Mixins

`@mixin flex-center`

Centers content both horizontally and vertically - the most common flexbox use case.

Use case: Hero sections, modals, cards

.hero {
  @include flex-center;
  min-height: 400px;
}

// Compiles to:
.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

`@mixin flex-between($align)`

Creates space-between layout (common for headers, navbars).

Parameters:

$align: Align items value (default: center)

.navbar {
  @include flex-between(center);
}

// Perfect for logo on left, nav on right

`@mixin flex-align($justify, $align)`

Full control over both justify-content and align-items.

Parameters:

$justify: Justify content value (default: flex-start)
$align: Align items value (default: stretch)

.custom-layout {
  @include flex-align(center, start);
}

Flex Item Mixins

`@mixin flex-item($grow, $shrink, $basis)`

Complete control over flex item behavior.

Parameters:

$grow: Flex grow factor (default: 0)
$shrink: Flex shrink factor (default: 1)
$basis: Flex basis (default: auto)

.sidebar {
  @include flex-item(0, 0, 300px); // Fixed 300px width
}

.main-content {
  @include flex-item(1, 1, 0); // Takes remaining space
}

`@mixin flex-grow($value)`

Control how much an item can grow.

.expand {
  @include flex-grow(2); // Grows twice as much as siblings with flex-grow: 1
}

`@mixin flex-shrink($value)`

Control how much an item can shrink.

.no-shrink {
  @include flex-shrink(0); // Won't shrink below its size
}

Layout Pattern Mixins

`@mixin flex-sidebar($sidebar-width, $gap, $position)`

Creates a sidebar layout with fixed-width sidebar and flexible content.

Parameters:

$sidebar-width: Width of the sidebar (default: 300px)
$gap: Gap between sidebar and content (default: 1rem)
$position: Sidebar position - left or right (default: left)

.layout {
  @include flex-sidebar(250px, 2rem, left);
}

`@mixin flex-sidebar-responsive($sidebar-width, $gap, $breakpoint, $position)`

Responsive sidebar that stacks on mobile.

Parameters:

$sidebar-width: Width of the sidebar (default: 300px)
$gap: Gap between elements (default: 1rem)
$breakpoint: Breakpoint for layout change (default: 768px)
$position: Sidebar position (default: left)

.responsive-layout {
  @include flex-sidebar-responsive(280px, 1.5rem, 992px, left);
}

`@mixin flex-cards($min-width, $gap, $justify)`

Responsive card grid that wraps automatically.

Parameters:

$min-width: Minimum width per card (default: 280px)
$gap: Gap between cards (default: 1.5rem)
$justify: Justify content (default: flex-start)

.product-grid {
  @include flex-cards(300px, 2rem, center);
}

// Cards automatically wrap and maintain minimum width

`@mixin flex-media($image-width, $gap)`

Classic media object pattern (image + content).

Parameters:

$image-width: Fixed width for image/media (default: 100px)
$gap: Gap between image and content (default: 1rem)

Use case: Comments, user profiles, news items

.comment {
  @include flex-media(64px, 1rem);
}

// HTML structure:
// <div class="comment">
//   <div class="media-image">Avatar</div>
//   <div class="media-content">Comment text</div>
// </div>

`@mixin flex-sticky-footer`

Classic sticky footer layout where content fills available space.

body {
  @include flex-sticky-footer;
}

// HTML structure:
// <body>
//   <header>...</header>
//   <div class="content">...</div>
//   <footer>...</footer>
// </div>

Advanced Flex Mixins

`@mixin flex-grid($cols, $gap)`

Simulates CSS Grid behavior with flexbox (for legacy support).

Parameters:

$cols: Number of columns (default: 3)
$gap: Gap between items (default: 1rem)

.grid-layout {
  @include flex-grid(4, 1.5rem);
}

// Creates 4-column layout that wraps

`@mixin flex-clamp($min, $preferred, $max, $gap)`

Modern responsive sizing using CSS clamp().

Parameters:

$min: Minimum width (default: 300px)
$preferred: Preferred width (default: 50%)
$max: Maximum width (default: 500px)
$gap: Gap between items (default: 1rem)

.responsive-cards {
  @include flex-clamp(280px, 45%, 600px, 2rem);
}

// Cards grow/shrink between 280px and 600px

`@mixin flex-equal($gap)`

Makes all children equal width.

.columns {
  @include flex-equal(2rem);
}

// All children get equal space

`@mixin flex-asymmetric($ratio, $gap)`

Creates asymmetric two-column layout.

Parameters:

$ratio: Ratio for first column (default: 2)
$gap: Gap between columns (default: 1rem)

.layout {
  @include flex-asymmetric(2, 1.5rem);
}

// First column is 2x the size of second column (2:1 ratio)

💡 Usage Examples

Hero Section with Centered Content

.hero {
  @include flex-center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 2rem;
  text-align: center;
}

Modern Navbar

.navbar {
  @include flex-between(center);
  padding: 1rem 2rem;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);

  .nav-links {
    @include flex-row(2rem);
    
    a {
      text-decoration: none;
      color: #333;
      
      &:hover {
        color: #667eea;
      }
    }
  }
}

Responsive Product Cards

.products {
  @include flex-cards(300px, 2rem, flex-start);
  padding: 2rem;

  .card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s;

    &:hover {
      transform: translateY(-4px);
    }
  }
}

Dashboard Layout

.dashboard {
  @include flex-sidebar-responsive(280px, 2rem, 1024px, left);
  min-height: 100vh;

  .sidebar {
    background: #2d3748;
    color: white;
    padding: 2rem;
  }

  .main-content {
    padding: 2rem;
    background: #f7fafc;
  }
}

Comment Section (Media Object)

.comments {
  @include flex-col(1.5rem);

  .comment {
    @include flex-media(50px, 1rem);
    padding: 1rem;
    background: white;
    border-radius: 8px;

    .avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: #e2e8f0;
    }

    .comment-content {
      h4 {
        margin: 0 0 0.5rem;
        color: #2d3748;
      }

      p {
        margin: 0;
        color: #718096;
      }
    }
  }
}

Sticky Footer Page

body {
  @include flex-sticky-footer;
  margin: 0;

  header {
    background: #2d3748;
    color: white;
    padding: 1rem 2rem;
  }

  .content {
    padding: 2rem;
    background: #f7fafc;
  }

  footer {
    background: #1a202c;
    color: white;
    padding: 2rem;
    text-align: center;
  }
}

Responsive Grid

.gallery {
  @include flex-grid(4, 1.5rem);
  padding: 2rem;

  @media (max-width: 1024px) {
    @include flex-grid(3, 1.5rem);
  }

  @media (max-width: 768px) {
    @include flex-grid(2, 1rem);
  }

  @media (max-width: 480px) {
    @include flex-grid(1, 1rem);
  }

  img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
  }
}

✅ Best Practices

1. Use Semantic Mixins

// ✅ Good - Semantic and clear
.header {
  @include flex-between(center);
}

// ❌ Avoid - Too generic
.header {
  @include flex(row, nowrap, 0);
  justify-content: space-between;
  align-items: center;
}

2. Mobile-First Approach

// ✅ Good - Mobile first
.cards {
  @include flex-col(1rem);

  @media (min-width: 768px) {
    @include flex-row(2rem);
    flex-wrap: wrap;
  }
}

// Or use responsive mixins
.layout {
  @include flex-stack(768px, 1.5rem);
}

3. Combine Mixins Effectively

.card-container {
  @include flex-cards(300px, 2rem);

  .card {
    @include flex-col(1rem);
    padding: 1.5rem;

    .card-header {
      @include flex-between(center);
    }

    .card-body {
      @include flex-grow(1);
    }

    .card-footer {
      @include flex-row(1rem);
      justify-content: flex-end;
    }
  }
}

4. Use Gap Instead of Margins

// ✅ Good - Modern and clean
.container {
  @include flex-row(1rem, wrap);
}

// ❌ Avoid - Old approach
.container {
  display: flex;
  margin: -0.5rem;
  
  > * {
    margin: 0.5rem;
  }
}

5. Choose the Right Mixin

// For equal columns
.columns {
  @include flex-equal(2rem);
}

// For auto-wrapping cards
.products {
  @include flex-cards(300px, 2rem);
}

// For fixed grid
.dashboard {
  @include flex-grid(3, 1.5rem);
}

// For sidebar
.layout {
  @include flex-sidebar-responsive(280px, 2rem, 1024px);
}

🌐 Browser Support

Modern Browsers: Chrome 29+, Firefox 28+, Safari 9+, Edge 12+
CSS Flexbox: 98%+ global support
Gap Property: Chrome 84+, Firefox 63+, Safari 14.1+
Clamp(): Chrome 79+, Firefox 75+, Safari 13.1+

Gap Fallback

For browsers without gap support, use the flex-gap-fallback mixin:

.container {
  @include flex-gap-fallback(1rem);
}

❓ FAQ

When should I use Flexbox vs CSS Grid?

Use Flexbox when:

Building one-dimensional layouts (row or column)
You need flexible item sizing
Working with dynamic content
Creating navigation, headers, footers
Building card layouts that wrap

Use CSS Grid when:

Building two-dimensional layouts
You need precise control over rows and columns
Creating page layouts
Working with overlapping content

Can I use Flexer with Gridder?

Absolutely! They complement each other perfectly:

.page {
  @include grid-container(12, 1rem); // Grid for page layout
  
  .header {
    @include grid-full-width;
    @include flex-between(center); // Flex for header content
  }
}

What's the difference between flex-cards and flex-grid?

flex-cards: Items have minimum width and grow to fill space (flexible)
flex-grid: Items have exact calculated width (rigid columns)

How do I handle older browsers?

Use the CSS file directly (includes fallbacks)
Use flex-gap-fallback for gap support
Consider autoprefixer in your build process

📄 License

MIT License - Free to use in personal and commercial projects.

🤝 Contributing

Contributions welcome! Please:

Fork the repository
Create a feature branch
Commit your changes
Push to the branch
Open a Pull Request

🔗 Related Projects

Mastors-Gridder - Comprehensive CSS Grid utility system
Mastors-Fluider - Responsive breakpoint utility system

Maintained by: KEHEM-IT
License: MIT
Current Version: 1.0.0
Last Updated: January 26, 2026

Name		Name	Last commit message	Last commit date
.github/workflows		.github/workflows
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
QUICKSTART.md		QUICKSTART.md
README-CSS.md		README-CSS.md
README.md		README.md
_mastors-flexer.scss		_mastors-flexer.scss
documentation.html		documentation.html
index.html		index.html
index.scss		index.scss
mastors-flexer.css		mastors-flexer.css
package.json		package.json

Uh oh!

Latest commit

History

Folders and files

Repository files navigation

Mastors-Flexer

📋 Table of Contents

🚀 Installation

Via CDN (Recommended for Quick Start)

Via NPM

Manual Installation

⚡ Quick Start

🎯 Flexbox Mixins Overview

📊 Quick Reference Table

Core Flex Mixins

Alignment Mixins

Flex Item Mixins

Layout Pattern Mixins

Responsive Mixins

Advanced Flex Mixins

📖 Detailed Documentation

Core Flex Mixins

@mixin flex($direction, $wrap, $gap)

@mixin flex-row($gap, $wrap)

@mixin flex-col($gap, $wrap)

Alignment Mixins

@mixin flex-center

@mixin flex-between($align)

@mixin flex-align($justify, $align)

Flex Item Mixins

@mixin flex-item($grow, $shrink, $basis)

@mixin flex-grow($value)

@mixin flex-shrink($value)

Layout Pattern Mixins

@mixin flex-sidebar($sidebar-width, $gap, $position)

@mixin flex-sidebar-responsive($sidebar-width, $gap, $breakpoint, $position)

@mixin flex-cards($min-width, $gap, $justify)

@mixin flex-media($image-width, $gap)

@mixin flex-sticky-footer

Advanced Flex Mixins

@mixin flex-grid($cols, $gap)

@mixin flex-clamp($min, $preferred, $max, $gap)

@mixin flex-equal($gap)

@mixin flex-asymmetric($ratio, $gap)

💡 Usage Examples

Hero Section with Centered Content

Modern Navbar

Responsive Product Cards

Dashboard Layout

Comment Section (Media Object)

Sticky Footer Page

Responsive Grid

✅ Best Practices

1. Use Semantic Mixins

2. Mobile-First Approach

3. Combine Mixins Effectively

4. Use Gap Instead of Margins

5. Choose the Right Mixin

🌐 Browser Support

Gap Fallback

❓ FAQ

When should I use Flexbox vs CSS Grid?

Can I use Flexer with Gridder?

What's the difference between flex-cards and flex-grid?

How do I handle older browsers?

📄 License

🤝 Contributing

🔗 Related Projects

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

`@mixin flex($direction, $wrap, $gap)`

`@mixin flex-row($gap, $wrap)`

`@mixin flex-col($gap, $wrap)`

`@mixin flex-center`

`@mixin flex-between($align)`

`@mixin flex-align($justify, $align)`

`@mixin flex-item($grow, $shrink, $basis)`

`@mixin flex-grow($value)`

`@mixin flex-shrink($value)`

`@mixin flex-sidebar($sidebar-width, $gap, $position)`

`@mixin flex-sidebar-responsive($sidebar-width, $gap, $breakpoint, $position)`

`@mixin flex-cards($min-width, $gap, $justify)`

`@mixin flex-media($image-width, $gap)`

`@mixin flex-sticky-footer`

`@mixin flex-grid($cols, $gap)`

`@mixin flex-clamp($min, $preferred, $max, $gap)`

`@mixin flex-equal($gap)`

`@mixin flex-asymmetric($ratio, $gap)`