CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



flex-wrap

Flex-wrap is a CSS property that allows the flexible items to wrap into multiple lines or columns. It is used in conjunction with the display property set to flex or inline-flex. Flex-wrap is used to control the layout of the flex container when the items overflow the container's width or height.

The flex-wrap property has three possible values:

  • nowrap: This is the default value. It means that the flexible items will not wrap and will be displayed in a single line.
  • wrap: This value allows the flexible items to wrap onto multiple lines or columns as needed.
  • wrap-reverse: This value is similar to wrap, but the flexible items wrap in reverse order.

Let's take a look at some code examples to better understand how flex-wrap works.

Example 1: nowrap

In this example, we have a flex container with four items. The flex-wrap property is set to nowrap, which means that the items will not wrap and will be displayed in a single line.

  
    .flex-container {
      display: flex;
      flex-wrap: nowrap;
    }
    
    .flex-item {
      flex: 1;
      height: 100px;
      background-color: #ccc;
      margin: 10px;
    }
<

Example 2: wrap

In this example, we have a flex container with six items. The flex-wrap property is set to wrap, which means that the items will wrap onto multiple lines or columns as needed.

  
    .flex-container {
      display: flex;
      flex-wrap: wrap;
    }
    
    .flex-item {
      flex: 1;
      height: 100px;
      background-color: #ccc;
      margin: 10px;
    }

Example 3: wrap-reverse

In this example, we have a flex container with six items. The flex-wrap property is set to wrap-reverse, which means that the items will wrap onto multiple lines or columns in reverse order.

  
    .flex-container {
      display: flex;
      flex-wrap: wrap-reverse;
    }
    
    .flex-item {
      flex: 1;
      height: 100px;
      background-color: #ccc;
      margin: 10px;
    }

As you can see, the flex-wrap property is a powerful tool for controlling the layout of flexible items in a container. By using the wrap and wrap-reverse values, you can create complex layouts that adapt to different screen sizes and device orientations.

Conclusion

Flex-wrap is a CSS property that allows flexible items to wrap onto multiple lines or columns. It is used in conjunction with the display property set to flex or inline-flex. The flex-wrap property has three possible values: nowrap, wrap, and wrap-reverse. By using these values, you can control the layout of flexible items in a container and create complex layouts that adapt to different screen sizes and device orientations.

References



Share via:

Activity