flex-wrap

Definition

flex-wrap is a CSS property that sets the flexible items wrap behavior in a flex container. It specifies whether the flexible items should be forced onto a single line or if they can be wrapped onto multiple lines.

Examples

In this example, the flexible items will be forced onto a single line and will not wrap onto multiple lines:

.container {
  display: flex;
  flex-wrap: nowrap;
}

In this example, the flexible items will be wrapped onto multiple lines, if necessary:

.container {
  display: flex;
  flex-wrap: wrap;
}

In this example, the flexible items will be wrapped onto multiple lines in reverse order:

.container {
  display: flex;
  flex-wrap: wrap-reverse;
}

Values

Best Practices

• Use flex-wrap property in combination with other flex properties, such as flex-direction, flex-grow, flex-shrink, etc., to achieve the desired layout.
• Use flex-wrap property with the wrap value to wrap items onto multiple lines if necessary, or use the nowrap value to force items onto a single line.
• Consider using min-width and max-width properties to set the minimum and maximum width of a flex item.
• Test your code in different screen sizes and browsers to ensure that it works as intended.
• Keep in mind that wrapping items can affect the overall layout and design.

Browser Compatibility