How Can I Align the Last Row of Items in a Flexbox with `justify-content: space-between;`?

Aligning Last Row Items with Flex-box

Flex-box layouts are known for their flexibility in arranging content. In a scenario where you have a flex-box container with items arranged using flex-flow: row wrap; and justify-content: space-between;, you may encounter a situation where you want the items in the last row to be aligned with the others.

Achieving Alignment with justify-content: space-between;

To achieve this alignment while maintaining the use of justify-content: space-between; for adjustable grid dimensions, you can utilize the following method:

  display: flex;<br>  flex-flow: row wrap;<br>  justify-content: space-between;<br>}<p>.grid::after {<br>  content: "";<br>  flex: auto;<br>}<br></p>

This CSS code adds an invisible element (::after) to the container. This element takes up the remaining space in the container, effectively aligning the items in the last row with the others while preserving the desired distribution for the other rows.

Example

Consider the following example where the last row item needs to be aligned in the "middle column":

  display: flex;<br>  flex-flow: row wrap;<br>  justify-content: space-between;<br>}<p>.grid::after {<br>  content: "";<br>  flex: auto;<br>}</p><p>.item {<br>  width: 100px;<br>  height: 100px;<br>  background-color: #ccc;<br>}<br></p>

This code creates a flex-box container with items wrapped onto multiple rows. The ::after element ensures the last row item is aligned with the others, maintaining the distribution of the other rows even as the container's width varies.

The above is the detailed content of How Can I Align the Last Row of Items in a Flexbox with `justify-content: space-between;`?. For more information, please follow other related articles on the PHP Chinese website!