How Can I Use Flexbox to Ensure 4 Items Per Row?

Flexbox: Enforce 4 Items per Row

In the realm of responsive design, flexbox provides a powerful tool for laying out elements. However, it's not always straightforward to achieve specific layouts, such as enforcing a fixed number of items per row.

Understanding the Issue

As described in the original query, the goal is to display 8 items in a flexbox container while maintaining a consistent arrangement of 4 items per row. By default, flexbox will distribute items equally along the available space, often resulting in uneven rows when the number of items exceeds the desired width.

Solution: Overriding Flex-Grow

In this scenario, the issue stems from the flex-grow property applied to the individual flex items. Flex-grow instructs the items to expand пропорционально to occupy any available space. However, since the items have no width defined, they continually shrink to zero and never wrap.

The key to enforcing a specific number of items per row is to define a width on the flex items. By setting a fixed width, each item occupies a predetermined space, forcing them to wrap when the available space is exceeded.

Implementation

The following CSS code demonstrates how to ensure that 8 items are displayed in 2 rows of 4:

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

.child {
  flex: 1 0 21%;
  margin: 5px;
  height: 100px;
  background-color: blue;
}

• Flex: 1 0 21%; - This flex shorthand property:

  • 1: Instructs items to grow (if there's available space) in proportion to this value.
  • 0: Sets the minimum width of the item to prevent it from shrinking.
  • 21: Defines the width of individual items as 21% of the parent container's width. Based on the flex value, this ensures that 4 items will fit on each row.
• Flex-wrap: wrap; - Allows items to wrap to the next line when the container width is insufficient.

Conclusion

By setting a fixed width for flex items and enabling flex wrapping, it becomes possible to enforce a specific number of items per row in a flexbox layout. This technique provides designers with greater control over the responsiveness and layout of their web elements.

The above is the detailed content of How Can I Use Flexbox to Ensure 4 Items Per Row?. For more information, please follow other related articles on the PHP Chinese website!