Zach’s ugly mug (his face)

Zach Leatherman

Flex Luthor, a Little CSS Flexbox Layout Helper

February 25, 2023 Tagged: Project

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’s ugly mug (his face)

Zach is a builder for the web at IndieWeb Avatar for https://www.netlify.comNetlify. He created 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 65 talks in nine different countries at events like Jamstack Conf, Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. Formerly part of Filament Group, NEJS CONF, and NebraskaJS. Read more about Zach »

Previous
JS Party Episode #266: Celebrating Eleventy 2.0 🎉
Next
The JavaScript Site Generator Review, 2023

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:

    Zach Leatherman :11ty:

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

  2. Dave 🧱

    Dave 🧱

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

  3. Zach Leatherman :11ty:

    Zach Leatherman :11ty:

    @dAvIDdarNES I… aM In awe But AlsO scAreD Of yoUr PoWer

Shamelessly plug your related post:

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)