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.

.flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.flex-center {
    justify-content: center;
    align-items: center;
}

.flex-wrap {
    flex-wrap: wrap;
}

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.