l-flexbox

l-flexbox.css is a CSS utility class to help you quickly build complex layouts using flexbox.

l-flexbox.css supports a float fallback for browsers that don't support the flexbox spec.

Checkout the demo

What does it do?

• Allows you to quickly start using CSS3 flexbox for layouts.
• Gives you sensible default fallback support in older browsers.
• Encourages (but does not enforce) BEM-style CSS conventions.
• Provides easy hooks for extensibility.
• Explains what the code does using detailed comments.

Dependencies

• Modernizr

How to Install

• Install with Bower: bower install --save l-flexbox-css
• Download from the project page.

How to use it

Include a <link> reference to l-flexbox.css (and any extensions) in your HTML head.

Create a "flexbox" container element, add the l-flexbox class to this element. Create child-elements and add the l-flexbox--item class to these elements.

<div class="l-flexbox">
    <div class="l-flexbox--item" style="border:1px solid blue;">First flex item</div>
    <div class="l-flexbox--item" style="border:1px solid green;">Second flex item</div>
</div>

Inspect the demo for more examples.

Authors

• 0xADADA - @0xadada

License

Copyright (c) 2013 0xADADA

Licensed under the MIT License