CSS flex-wrap

The CSS flex-wrap property is used to wrap items in flex container. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container{width:120px; display: flex; flex-wrap: wrap; background-color: brown;}
      .container > div{padding: 12px; border: 1px solid coral; color: wheat;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
   </div>
   
</body>
</html>

Output

Note - Since the height is not defined, therefore after using flex-wrap: wrap;, the overflowed content/items gets wrapped after expanding the height of the flex container.

Now the question is, what if we remove the flex-wrap property from above example ?
Let's find out the answer with another example given below:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container{width:120px; display: flex; background-color: brown;}
      .container > div{padding: 12px; border: 1px solid coral; color: wheat;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
   </div>
   
</body>
</html>

Output

Using the flex-wrap: wrap;, the content will be inside the flex container. Whereas without this property, the content goes overflow, out of the defined flex box size. To hide the overflow, use overflow: hidden;

CSS flex-wrap Syntax

The syntax of flex-wrap property in CSS, is:

flex-wrap: x;

The value of x should be any of the following:

wrap - used to wrap the overflowed flex items
nowrap - used not to wrap the overflowed flex items. This is the default value
wrap-reverse - used to wrap the overflowed flex items, in reverse order
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS flex-wrap: wrap-reverse Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container{width:120px; display: flex; flex-wrap: wrap-reverse; background-color: brown;}
      .container > div{padding: 12px; border: 1px solid coral; color: wheat;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
   </div>
   
</body>
</html>

Output

CSS Online Test

« Previous Tutorial Next Tutorial »