asleepysamurai / flex-cheat

Easy cheat classes for CSS flexboxes

flex-cheat - Easy cheat classes for common CSS flexbox layouts.

CSS stylesheet which provides the following basic classes:

• flex-container: Marks an item as a display:flex and all it's immediate children as fixed width i.e. both flex-grow and flex-shrink set to 0.
• flex-container.column: flex-container + sets flex-direction to column.
• flex-container.inline: flex-container but sets display to flex-inline instead of flex.
• flex-container.center: flex-container + centers direct child elements using align-items.
• flex-container.column.center: flex-container.column + centers direct child elements using justify-content.
• flex-rest: To be added to specific direct child elements, to allow them to take up the rest of available space. When multiple child elements are marked as flex-rest they share remaining space equally. Components marked flex-rest will grow and shrink as required.

You can see all these style declarations in flex-cheat.css. That will also be the single file required to be imported into your application.

That's it? Just six classes?

Yes, that's all there is to it. However, do not mistake the simplicity for impotence. By combining these six classes, we can come up with a myriad of layouts.

• Fixed Width Row:
• Equal Width Row:
• Mixed Width Row:
• Centered With Fixed Width Row:
• Centered With Mixed Width Row:
• Fixed Height Column:
• Equal Height Column:
• Mixed Height Column:
• Centered With Fixed Height Column:
• Centered With Mixed Height Column:
• Grid With Mixed Rows and Columns:

The code for these examples can be found in the examples directory.

Deceptively simple eh?