Flex-wrap

The flex-wrap property defines that if the flexible items should wrap or not. In other words, it defines whether the children are forced into a single line or if the items can be flowed on multiple lines.

Let us you remind that if there are no flexible items, flex-wrap property won't have any effect.

CSS Syntax

flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit;

Let's see an example:

As you can see, we used wrap-reverse value for first example:

<!DOCTYPE html>
<html>
   <head>
     <style> 
         #color-container {
            width: 200px;
            height: 200px;
            border: 1px solid #c3c3c3;
            display: -webkit-flex; 
            -webkit-flex-wrap: wrap; 
             display: flex;
             flex-wrap: wrap-reverse;
           }

          #color-container div {
             width: 50px;
            height: 50px;
          }
       </style>
    </head>

   <body>

        <div id="color-container">
            <div style="background-color:red;">A</div>
            <div style="background-color:yellow;">B</div>
            <div style="background-color:pink;">C</div>
            <div style="background-color:orange;">D</div>
            <div style="background-color:lightgreen;">E</div>
            <div style="background-color:purple;">F</div>
        </div>

</body>
</html>

Here is the result:



Let's see another example:


We had used wrap-reverse value for the first example, now we will use "nowrap" value.

<!DOCTYPE html>
<html>
   <head>
      <style> 
           #color-container {
               width: 200px;
                height: 200px;
                border: 1px solid #c3c3c3;
                display: -webkit-flex; 
                -webkit-flex-wrap: wrap; 
                display: flex;
                flex-wrap: nowrap;
            }

            #color-container div {
                width: 50px;
                height: 50px;
              }
      </style>
   </head>
   <body>

      <div id="color-container">
         <div style="background-color:red;">A</div>
         <div style="background-color:yellow;">B</div>
         <div style="background-color:pink;">C</div>
         <div style="background-color:orange;">D</div>
         <div style="background-color:lightgreen;">E</div>
         <div style="background-color:purple;">F</div>
      </div>

   </body>
</html>

Here is the result:



Property Values

Value Descriptions
nowrap It defines that flexible items won't wrap. It is the default value of this property.
wrap It defines that the flexible items will wrap when it is needy.
wrap-reverse It defines that the flexible items will wrap in reverse order when it is needy.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.