How to Prevent Flexbox Item Centering on Incomplete Lines?

How to Prevent Flexbox Items from Centering on Broken Lines?

In Flexbox, if you have a flexible container with items that do not fit evenly in a line within its width, the remaining items on that line are centered. But what if you want the remaining items to start from the left and have equal spacing, just like the items on complete lines?

Solution: Using "Ghost" Elements

Without using JavaScript, you can create empty elements (known as "ghost" elements) that fill the remaining space on the incomplete line.

For example, if your container's potential column length is 4, you will need 3 ghost elements. You can add these to the end of your HTML:

<div class="card"></div>
<div class="card"></div>
<div class="card"></div>

Updated CSS:

.card:empty {
    width: 300px;
    box-shadow: none;
    margin: 2rem;
    padding-bottom: 0;
}

This ensures that the ghost elements occupy the same space as the actual cards.

Using Pseudo Elements

You can also utilize CSS pseudo elements to reduce the number of ghost elements needed:

.card:empty::before {
    content: "";
    width: 300px;
    box-shadow: none;
    margin: 2rem;
}

This creates a pseudo element for each empty card that takes up its place on the incomplete line. By replacing 2 ghost elements with 2 pseudo elements, you only need 1 actual ghost element for a column length of 4.

Example Code:

<div class="container">
  <div class="recipe-grid">

    <div class="card">
      <!-- Card content -->
    </div>

    <div class="card">
      <!-- Card content -->
    </div>

    <div class="card">
      <!-- Card content -->
    </div>

    <div class="card">
      <!-- Card content -->
    </div>

    <div class="card"></div> <!--- Ghost element -->

  </div>
</div>

By using ghost elements or pseudo elements, you can prevent Flexbox items from centering on incomplete lines and ensure a more visually pleasing arrangement.

The above is the detailed content of How to Prevent Flexbox Item Centering on Incomplete Lines?. For more information, please follow other related articles on the PHP Chinese website!