Flex Luthor, a Little CSS Flexbox Layout Helper

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…


This content originally appeared on Zach Leatherman and was authored by Zach Leatherman

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).

Demo
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


This content originally appeared on Zach Leatherman and was authored by Zach Leatherman


Print Share Comment Cite Upload Translate Updates
APA

Zach Leatherman | Sciencx (2023-02-25T00:00:00+00:00) Flex Luthor, a Little CSS Flexbox Layout Helper. Retrieved from https://www.scien.cx/2023/02/25/flex-luthor-a-little-css-flexbox-layout-helper/

MLA
" » Flex Luthor, a Little CSS Flexbox Layout Helper." Zach Leatherman | Sciencx - Saturday February 25, 2023, https://www.scien.cx/2023/02/25/flex-luthor-a-little-css-flexbox-layout-helper/
HARVARD
Zach Leatherman | Sciencx Saturday February 25, 2023 » Flex Luthor, a Little CSS Flexbox Layout Helper., viewed ,<https://www.scien.cx/2023/02/25/flex-luthor-a-little-css-flexbox-layout-helper/>
VANCOUVER
Zach Leatherman | Sciencx - » Flex Luthor, a Little CSS Flexbox Layout Helper. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/02/25/flex-luthor-a-little-css-flexbox-layout-helper/
CHICAGO
" » Flex Luthor, a Little CSS Flexbox Layout Helper." Zach Leatherman | Sciencx - Accessed . https://www.scien.cx/2023/02/25/flex-luthor-a-little-css-flexbox-layout-helper/
IEEE
" » Flex Luthor, a Little CSS Flexbox Layout Helper." Zach Leatherman | Sciencx [Online]. Available: https://www.scien.cx/2023/02/25/flex-luthor-a-little-css-flexbox-layout-helper/. [Accessed: ]
rf:citation
» Flex Luthor, a Little CSS Flexbox Layout Helper | Zach Leatherman | Sciencx | https://www.scien.cx/2023/02/25/flex-luthor-a-little-css-flexbox-layout-helper/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts