How to Create a Two-Row Flexbox Grid with Four Items Per Row?

Flexbox: Creating a Two-Row Grid with Four Items Per Row

Flexbox provides a powerful layout system for creating dynamic and responsive web pages. One common use case is to create a grid-like layout that automatically wraps and resizes its items as the viewport size changes.

The Problem: Wrapping Items Into Multiple Rows

In your specific scenario, you're facing an issue where your flexbox container displays eight items in a single row instead of splitting them into two rows of four items each.

The Solution: Understanding Flexbox Properties

To force the items into two rows, we need to adjust two flexbox properties: flex-wrap and flex-grow.

flex-wrap: wrap

The flex-wrap property controls whether the items in the container can wrap to form multiple rows. By setting it to wrap, you're allowing items to flow onto new lines as needed.

flex-grow: 1

The flex-grow property controls how the items distribute excess space within the container. A value of 1 means that each item will grow proportionally to fill the available space on its line.

The Issue: Overriding Default Values

In your original code, flex-wrap was set to wrap, but flex-grow was set to 1 on the flex items. This resulted in the items growing to occupy the entire available width, preventing them from wrapping.

The Fix: Defining Item Width

To solve the problem, we need to define a specific width for the items so that they don't overgrow and force wrapping. In the corrected code, we've used the flex property with three values:

1. flex: 1 0 21%; - The first value (1) sets the item's growth factor to 1, which is the same as flex-grow: 1.
2. flex: 1 0 21%; - The second value (0) sets the item's shrinkage factor to 0, which means it won't shrink below its specified width.
3. flex: 1 0 21%; - The third value (21%) sets the item's initial width to 21% of the container's width.

By defining the item's width, we ensure that they wrap appropriately into two rows of four items each.

The above is the detailed content of How to Create a Two-Row Flexbox Grid with Four Items Per Row?. For more information, please follow other related articles on the PHP Chinese website!