Why Aren't My Flexbox Items Wrapping Properly?

Troubleshooting Flex Item Wrapping

When creating multiple rows of equal-height elements using flexbox, it's common to encounter issues with items not wrapping properly. This occurs because the default behavior of flex containers is to prevent wrapping (flex-wrap: nowrap).

To enable wrapping, set flex-wrap to wrap:

#list-wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

Understanding Flex Container Properties:

• display: flex: Initializes an element as a flex container, aligning items in a single row or column.
• flex-wrap: wrap: Enables items to wrap within the container.
• flex-wrap: nowrap: Prevents items from wrapping, confining them to a single line.

Example:

Consider the following example to create three rows of three equal-height squares:

#list-wrapper {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid black;
}

#list-wrapper div {}

#list-wrapper div img {
  height: 150px;
  width: 150px;
}

<div>

The above is the detailed content of Why Aren't My Flexbox Items Wrapping Properly?. For more information, please follow other related articles on the PHP Chinese website!