CSS flex-wrap Property

Posted in CSS Tutorial

Updated on Aug 06, 2024

By Mari Selvan

👁️ 6 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The flex-wrap property in CSS is used in flexbox layouts to control whether flex items are forced onto one line or can wrap onto multiple lines.

This property is essential for creating responsive designs that adapt to different screen sizes and orientations.

By using flex-wrap, you can ensure that your layout remains functional and aesthetically pleasing, even when the available space is limited.

💡 Syntax

The syntax for the flex-wrap property is simple and can be applied to any flex container.

Syntax

Copied

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

🎛️ Default Value

The default value of the flex-wrap property is nowrap, meaning that all flex items will be kept on a single line, even if they overflow the container.

🏠 Property Values

Value	Description
nowrap	All flex items will be kept on a single line. Overflow is not prevented.
wrap	Flex items will wrap onto multiple lines, from top to bottom.
wrap-reverse	Flex items will wrap onto multiple lines, from bottom to top.

📄 Example

In this example, we'll create a flex container with items that will wrap onto multiple lines.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS flex-wrap Example</title>
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
      width: 200px;
      border: 1px solid #000;
    }
    .item {
      width: 100px;
      height: 50px;
      background-color: lightblue;
      margin: 5px;
      text-align: center;
      line-height: 50px;
    }
  </style>
</head>
<body>
  <h1>Flex Container with Wrapping Items</h1>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The flex-wrap property is widely supported in all modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. This ensures that you can use this property confidently in your web projects.

🎉 Conclusion

The flex-wrap property is a valuable tool for web developers looking to create flexible and responsive layouts.

By allowing flex items to wrap onto multiple lines, you can design layouts that adapt to various screen sizes and orientations, providing a better user experience. Experiment with different values of flex-wrap to see how they can enhance the look and functionality of your web projects.