Lesson Weekend

The last few lessons introduced tons of flexbox properties. While this is a long list, keep in mind the CSS necessary to 'manually' organize layouts with position, float, and other properties would require much more CSS than flexbox!

And, despite the brevity of CSS required for flexbox layouts, as opposed to 'old fashion' float-based layouts, there's still a few shortcuts we can use to make flexbox CSS more DRY.

Flexbox Shortcuts

There are two main shortcuts we can employ to keep our flexbox CSS DRY:

  1. The flex-flow rule can be used to set multiple flexbox properties on a parent flex container.

  2. The flex property can declare multiple flexbox properties on a child flex item.

flex-flow Shortcut for Flex Containers

flex-flow on a parent can specify flex-direction and flex-wrap properties in the same style declaration. We simply use the flex-flow property and provide both flex-direction and flex-wrap values in the following order:

.parent {
  flex-flow: (FLEX-DIRECTION) (FLEX-WRAP);
}

For example, the following CSS:

.parent {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

Could be shortened into this:

.parent {
  display: flex;
  flex-flow: column wrap;
}

flex Shortcut for Flex Items

Similarly, we can use the flex property on flex item children to specify their flex-grow, flex-shrink and flex-basis values in a single declaration, using the following format:

.child {
  flex: (FLEX-GROW) (FLEX-SHRINK) (FLEX-BASIS);
}

Which means the following CSS:

.child {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 150px;
}

Could be condensed into this:

.child {
  flex: 0 0 150px;
}

Additional Materials and Resources

If you'd like to learn more about flexboxes, we've compiled the following list of recommended resources:

Quick Reference

In addition to our lessons on flexbox, here are several quick-reference guides and cheatsheets:

Sandboxes and Experimentation

The following tools allow us to experiment with flexbox elements in a live 'sandbox':

  • Bennett Feely's Flexplorer tool allows us to experiment with applying different combinations of properties to a flexbox container.

  • This Flexbox Playground by CodePen user Gabi allows us to observe the effects of individual flexbox properties.

Lessons and Other Material

Lesson 1 of 36
Last updated more than 3 months ago.