Skip to content
Easy cheat classes for CSS flexboxes
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

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 + centers direct child elements using align-items.
  • 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: Fixed Width Row
  • Equal Width Row: Equal Width Row
  • Mixed Width Row: Mixed Width Row
  • Centered With Fixed Width Row: Centered With Fixed Width Row
  • Centered With Mixed Width Row: Centered With Mixed Width Row
  • Fixed Height Column: Fixed Height Column
  • Equal Height Column: Equal Height Column
  • Mixed Height Column: Mixed Height Column
  • Centered With Fixed Height Column: Centered With Fixed Height Column
  • Centered With Mixed Height Column: Centered With Mixed Height Column
  • Grid With Mixed Rows and Columns: Grid With Mixed Rows and Columns

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

Deceptively simple eh?

You can’t perform that action at this time.