How to Prevent Centering of the Last Flex Items When Using Flexbox Wrap?

How to Change Flexbox Wrap

In this responsive flexbox scenario, flex items are progressively wrapped as the screen size decreases. To fine-tune the wrapping behavior, we'll explore how to maintain the last flex items uncentered, starting from the left:

Implementing Ghost Elements:

CSS can be used to create "ghost" elements to occupy the remaining space on the last line. For instance, assuming a potential column length of 4, we would require 3 ghost elements:

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

Pseudo Elements:

Pseudo elements can also be employed, reducing the number of ghost elements needed by 2:

::after {
    content: "";
    flex: 1;
}

Edited Example:

Here's an updated version of the code with these ghost elements added:

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

With these enhancements, the flex items will wrap as desired, with the last 2 items uncentered and starting from the left.

The above is the detailed content of How to Prevent Centering of the Last Flex Items When Using Flexbox Wrap?. For more information, please follow other related articles on the PHP Chinese website!