Flexbox Base Snippet

10/13/2017

I love flexbox. It solves so many problems CSS used to have. So over the time, I collected a useful but simple snippet I use in many projects.

  1. .flex {
  2. display: flex;
  3. }
  4.  
  5. .flex-column {
  6. flex-direction: column;
  7. }
  8.  
  9. .flex-row {
  10. flex-direction: row;
  11. }
  12.  
  13. .flex-center {
  14. justify-content: center;
  15. align-items: center;
  16. }
  17.  
  18. .flex-wrap {
  19. flex-wrap: wrap;
  20. }

You can use this in many situations, like for...

Full Height Columns

As CSS grids are unfortunately not as well supported right now, I still use the normal grids. However, with some flexbox hacking, they get some features that grid offers - like full height columns.

See the Pen Flex row by Max (@krmax44) on CodePen.light

Horizontal Centering with Flex

You can easily center content horizontally with this small snippet.

See the Pen Center with Flex by Max (@krmax44) on CodePen.light

There are many more ways to use this snippet, like complex cards or button groups etc. I'm sure you find a creative way to use it. Be sure to @krmax44 me those things!

A good way to store these lines would be Remember - check it out in my previous post.