Flex wrap Not Working

In this article, we will see why the CSS flex-wrap property is not working when we reduce the window size. Let’s see an example of how to make it work properly:

Example:

HTML:

<div id="container">
   <div class="item item-1">Item 1</div>
   <div class="item item-2">Item 2</div>
   <div class="item item-3">Item 3</div>
   <div class="item item-4">Item 4</div>
   <div class="item item-5">Item 5</div>
</div>

CSS:

#container{
  border: 2px black solid;
  display: flex;
 }
.item{
   padding: 1px;
   text-align: center;
}
.item-1{
   background-color: red;
}
.item-2{
   background-color: green;
}
.item-3{
   background-color: orange;
}
.item-4{
   background-color: darkviolet;
  
}
.item-5{
   background-color: yellow;
 }

Output:

Steps:

1. In our above example, we have created a <div> flex container and inside it we have created 5 <div> flex items. See the above code, the parent container is displayed inside the flex items.
2. By default, all the flex items in a container will try to fit into a single line.If there is not enough space in the items simply overflow. So, if we reduce the browser window size, the items will begin to shrink and then are no longer in view. We can change this behavior using the flex-wrap property.
3. The “flex-wrap” property can accept three possible values, the first value is “nowrap” it is the default value. If you want to wrap within the container then we set a “flex-wrap” to “wrap” for the flex container. We haven’t removed the display flex property on the container. See the below newly added code:

   #container{
     border: 2px black solid;
     display: flex;
     flex-wrap: wrap;
   }

4. Output: See the output, our flex items have been wrapped in the container. The wrapping takes place as and when needed. If there is not enough space for just 1 flex item, it will move into the next row.
5. And the final possible value for the ‘flex-wrap’ property is “wrap-reverse”. It does, instead of items falling into the row below, it climbs into the row above. See the changed value of the container and our expected output below:

   #container{
     border: 2px black solid;
     display: flex;
     flex-wrap: wrap-reverse;
   }

See the output, our flex items are wrapped above. It is used to wrap in the reverse order of the items.

How to fix if flex-wrap not working

If the flex-wrap property is not working for you then follow the below points:

• Set CSS “display” property to “flex” for the flex container because “flex-wrap” works only for flex items.
• Set CSS “flex-wrap” property to “flex” for the flex container because the default value is “nowrap”. If you don’t do, your flex items won’t wrap.
• Make sure your flex items are placed inside the container in HTML.