Flex Luthor, a Little CSS Flexbox Layout Helper

February 25, 2023

@zachleat/flex-luthor

A small wrapper library to help with responsive intrinsic-sized Flexbox layouts that wrap based on content and container width and avoiding viewport-based media queries.

flex-luthor.zachleat.dev GitHub npm

npmx 0%

Versions: 5 versions in 25 Feb 2023

4.0.2
27 Feb 2023
Audit: 0 reports
0 deps
Issues: 0
PRs: 0
1

Just going through the backlog of some old projects and found this Filament Group gem that went unpublished!

Flex Luthor is a small CSS wrapper library to help with responsive intrinsic-sized Flexbox layouts that wrap based on content and container width (avoiding viewport-based media queries).

View the Demo or Source Code

This library predated Flexbox support for the gap property but I updated it to use gap in the new v3.0.0 version. I think the coolest feature it provides is the addition of borders only when cells wrap to a new line (horizontal, vertical, or both).

Install

Available on npm

npm install @zachleat/flex-luthor --save

Zach Leatherman is a builder for the web at Font Awesome and the creator of Build Awesome (née Eleventy/11ty), an award-winning open source website generator. He measures website performance with speedlify and at one point became too fixated on web fonts. He has given 89 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »