Using the flex-flow shorthand

Previously, we looked at how the flex shorthand combined flex-grow, flex-shrink, and flex-basis together. Let's introduce another shorthand, flex-flow, which will allow us to cut down on our properties a bit by combining flex-direction and flex-wrap together. Anyway, this simplifies our CSS a little bit:

.flex-container {  margin-top: 200px;  display: flex;  justify-content: space-between;  flex-flow: column wrap;  align-content: center;  height: 300px;  border: 1px solid #777; }

Nothing changes, which is exactly what we want when we refactor using a shorthand:

Given how closely dependent align-content is on flex-wrap ...

Get Mastering CSS now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.