Use of flex-flow: column wrap;

I understood what flex-flow: row wrap can do…but flex-flow: column wrap; does not make any changes right? Since all boxes are in a separate line, so warping is no needed?

topic link: https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-making-a-website-responsive/modules/fecp-layout-with-flexbox/lessons/learn-flexbox/exercises/flex-flow

Hey George, how are you doing? :slight_smile:

You wrap when you want your flex items to pile one over the other when the viewport size changes.

In a row direction your flex items are horizontally positioned (also referred to as inline). This is problematic when a user switches from a horizontal viewport to a vertical (or portrait) viewport. The flex items may not fit in the width of the display anymore. So we add wrap in order to make the flex items pile vertically when they do not fit anymore.

In a column direction the concept is exactly the same but reversed.
If you want to learn more about it I advise to check out MDN and CSS tricks websites.

Does this help? :slight_smile:

1 Like