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: