How Can I Ensure Consistent Item Widths in Flexbox After Wrapping?

Item Width Consistency After Flexbox Wrapping

Introduction:
In CSS, flexbox layout provides flexibility for arranging elements by giving them dynamic sizing and wrapping capabilities. However, one common issue is ensuring equal item widths after wrapping occurs.

The Problem:
When using flexbox, it's possible to create a layout where items have a minimum width and can grow to fill available space. However, when the items wrap onto multiple lines, the last row items may have uneven widths, resulting in an undesirable appearance.

CSS Only Solution:
Unfortunately, pure CSS does not currently offer a clean solution for aligning flexible items in the last row. It's beyond the scope of the flexbox specification.

Alternative Approach: CSS Grid Layout
Grid layout, another CSS3 technology, provides a solution for this problem. Grids allow for more precise control over item placement and can ensure equal item widths on the last row:

Code:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: 20px;
  grid-gap: 5px;
}

.item {
  background: yellow;
  text-align: center;
  border: 1px solid red;
}

Explanation:

• display: grid sets the container element to use a grid layout.
• grid-template-columns defines the columns in the grid, with auto-fit creating as many columns as needed and minmax() setting the minimum and maximum width for each column.
• grid-auto-rows specifies the height of the rows, in this case, 20px.
• grid-gap adds some space between the grid items.

The above is the detailed content of How Can I Ensure Consistent Item Widths in Flexbox After Wrapping?. For more information, please follow other related articles on the PHP Chinese website!