CSS - flex-wrap

Previous
Next

Description

flex-wrap determines whether flex items should move to new lines when they exceed the container's width or height. It manages the arrangement of flex items within the flex container when space is limited.

Possible Values

  • nowrap

  • wrap

  • wrap-reverse

Applies to

All the HTML elements.

DOM Syntax

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

Flex Wrap Nowrap

Set the flex-wrap property to the value nowrap, it ensures that flex items do not wrap to new lines if they exceed the container's width or height.

Let us see an eample −

<html>
<head>
<style>
   .my-flex-container {
      display: flex;
      flex-wrap: nowrap;
      background-color: #0ca14a;
   }
   .my-flex-container>div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 10px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <h3>As you resize the browser window, flex items will remain on a single line.</h3>
   <div class="my-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>

Flex Wrap

flex-wrap: wrap property allows flex items to wrap onto multiple lines when they cannot be not fit in a single line.

Let us see an eample −

<html>
<head>
<style>
   .my-flex-container {
      display: flex;
      flex-wrap: wrap;
      background-color: #0ca14a;
   }
   .my-flex-container>div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 10px;
      width: 75px;
      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="my-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>

Flex Wrap Wrap Reverse

You can use flex-wrap: wrap-reverse property, flex items will be arranged in multiple lines, and the last line will appear at the beginning of the container.

Let us see an example −

<html>
<head>
<style>
   .my-flex-container {
      display: flex;
      flex-wrap: wrap-reverse;
      background-color: #0ca14a;
   }
   .my-flex-container div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 5px;
      width: 75px;
      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="my-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>
Print Page
Previous
Next
Advertisements