How Can I Force Flexbox Items into Two Specific Rows?

Flexbox: Displaying Items in Two Rows

In Flexbox, you can easily distribute items across multiple lines by setting flex-wrap: wrap on the container. However, to force items into specific rows, you need to control the sizing and spacing of the elements.

The Issue of Dynamic Resizing Items

In the provided code, you have eight items with flex-grow: 1, which means each item will try to occupy as much available space as possible. This can hinder the desired two-row layout.

Solution: Controlling Item Width

To create two rows of four items each, you need to define a fixed width for the child elements. Modify the child styles as follows:

.child {
  flex: 1 0 21%; /* Adjust the percentage as needed */
}

• flex: 1 0 21%:

  • 1: Sets the flex-grow to 1, allowing items to grow
  • 0: Sets the flex-shrink to 0, preventing the items from shrinking beyond the 21% width
  • 21%: Specifies the initial width for each item (you may need to adjust this value slightly)

With both flex-wrap and item widths defined, your items will now align neatly in two rows of four.

The above is the detailed content of How Can I Force Flexbox Items into Two Specific Rows?. For more information, please follow other related articles on the PHP Chinese website!