How to Force CSS Flex Items to Wrap?

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.