How Can I Make Flexbox Items Wrap to Multiple Rows While Maintaining Proportional Sizing?

Flexbox: Displaying Items in Multiple Rows

In flexbox, achieving a layout with multiple rows can be challenging. Consider a scenario where eight items are expected to dynamically resize and align in two rows, with four items per row. To resolve this, a few key adjustments are necessary.

Firstly, ensure that flex-wrap is set to wrap on the container element. This overrides the default nowrap setting, allowing items to break into multiple rows.

However, the primary hurdle lies in the flex-grow: 1 property assigned to the flex items. While this property distributes available space proportionally, it can hinder wrapping. Since there's no content in the flex items, they will shrink to zero width and remain on a single line.

The solution is to specify a width for the items. By applying flex: 1 0 21%;, the items will:

• Flex: 1 - Flex items will flex to fill available space.
• 0 - Flex items will have a minimum width of zero, allowing them to shrink.
• 21% - Flex items will have a preferred width of 21%, ensuring they accommodate content and distribute evenly within the container.

The above is the detailed content of How Can I Make Flexbox Items Wrap to Multiple Rows While Maintaining Proportional Sizing?. For more information, please follow other related articles on the PHP Chinese website!