CSS Flexbox - flex-wrap Property

CSS flex-wrap property determines whether flex items should remain on a single line or are allowed to wrap onto multiple lines. When wrapping is allowed, it determines the direction in which lines are stacked.

Possible Values

  • nowrap − Default Value. The flex items are placed in a single line, which may extend beyond the flex containers. Depending on the flex-direction value, the cross-start is defined by the start or before.

  • wrap − The flex items break into multiple lines. The cross-start is the same as the start or before, depending on the flex-direction value, while the cross-end is the reverse of the given cross-start.

  • wrap-reverse − It wraps flex items similar to wrap, but the positions of cross-start and cross-end are swapped.

Applies to

Flex containers.

Syntax

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

CSS flex-wrap - nowrap Value

The following example demonstrates with flex-wrap: nowrap property, the flex items will remain on the same line when the browser window is resized horizontally, even if they overflow the flex container −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      flex-wrap: nowrap;
      background-color: green;
   }
   .flex-container>div {
      background-color: yellow;
      padding: 10px;
      margin: 10px;
      width: 50px;
      height: 50px;
   }
</style>
</head>
<body>
   <h3>As you resize the browser window, flex items will remain on a single line.</h3>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
      <div>Flex item 6</div>
      <div>Flex item 7</div>
   </div>
</body>
</html>

CSS flex-wrap - wrap Value

The following example demonstrates that flex-wrap: wrap property allows flex items to break into multiple lines when they cannot not fit in a single line −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      flex-wrap: wrap;
      background-color: green;
   }
   .flex-container>div {
      background-color: yellow;
      padding: 10px;
      margin: 10px;
      width: 50px;
      height: 50px;
   }
</style>
</head>
<body>
   <h3>As you resize the browser window, flex items should move to a new line inside their container.</h3>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
      <div>Flex item 6</div>
      <div>Flex item 7</div>
   </div>
</body>
</html>

CSS flex-wrap - wrap-reverse

The following example demonstrates that flex-wrap: wrap-reverse property arranges the flex items in multiple lines, and wraps flex items in reverse order −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      flex-wrap: wrap-reverse;
      background-color: green;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      width: 50px;
      height: 50px;
   }
</style>
</head>
<body>
   <h3>As you resize the browser window, flex items should move to a new line in reverse order.</h3>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
      <div>Flex item 6</div>
      <div>Flex item 7</div>
   </div>
</body>
</html>
Advertisements