Zach’s ugly mug (his face) Zach Leatherman

Flex Luthor, a Little CSS Flexbox Layout Helper

February 25, 2023

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

< Newer
Five Million npm Downloads for Eleventy
Older >
The JavaScript Site Generator Review, 2023

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://fontawesome.com/Font Awesome and the creator/maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 83 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 »

6 Reposts

motionsuggests@indieweb.socialBaruch KatzJens GrochtdreisKhalid ⚡IndieWeb Avatar for https://www.alvinashcraft.comそめ

19 Likes

Andy DaviesRobin BakkerRodney Pruittmotionsuggests@indieweb.socialLynn FisherThomas Sobieck 🐘Dennis FloodnsfounderJason BrownJacob RasknoamswBaruch KatzRyan Randall :OpenAccess: :hc:Nathan BottomleyFrancesco SchwarzSol KawageKhalid ⚡Dave 🧱Lenz Grimmer
3 Comments
  1. Zach Leatherman :11ty:

    no—*you* are just getting around to blogging things from 3 years ago, not me

  2. Dave 🧱

    @zachleat can the CSS Grid companion lib to this be called The Griddler ❔🎩

  3. Zach Leatherman :11ty:

    @DavidDarnes I… am in awe but also scared of your power

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)