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:flexand all it's immediate children as fixed width i.e. both flex-grow and flex-shrink set to 0.
flex-containerbut sets display to
flex-container+ centers direct child elements using
flex-container.column+ centers direct child elements using
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-restthey share remaining space equally. Components marked
flex-restwill 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
Deceptively simple eh?