You can force CSS flex items to wrap by specifying the flex-wrap
property on the flexbox container element, for example, like so:
.container { display: flex; flex-wrap: wrap; }
Alternatively, you can use the flex-flow
property, which is a shorthand for specifying the flex-direction
and flex-wrap
properties together:
.container { display: flex; flex-flow: row wrap; /* flex-direction: row; flex-wrap: wrap; */ }
In either case, the flex-wrap
property controls whether the flex items wrap onto multiple lines or stay on a single line. By default, the value of flex-wrap
is set to nowrap
, which means that the flex items will try to fit on a single line. However, when you specify its value as wrap
, it causes the flex items to wrap onto multiple lines if needed.
This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.