从CSS网格布局更改为flexbox

Answer 1

left

不是

justify-content

的有效值。您需要使用值

start

。

.listing-grid {
  justify-content: start;
}

演示片段：

.listing-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: start;
  align-content: center;
}

.listing {
  width: calc(25% - 20px);
}

.listing img {
  max-width: 100%;
}

.listing h3, .listing p {
  margin: 0;
}

<div class="listing-grid">
    <div class="listing">
        <img class="listing-image" src="https://picsum.photos/200" alt="something">
        <div class="listing-details">
            <h3>Item 1</h3>
        </div>
        <div class="listing-price">
            <p>Price: €1</p>
        </div>
        <a href="details.html" class="details-button">Details</a>
    </div>

    <div class="listing">
        <img class="listing-image" src="https://picsum.photos/200" alt="something">
        <div class="listing-details">
            <h3>Item 2</h3>
        </div>
        <div class="listing-price">
            <p>Price: €2/p>
        </div>
        <a href="details.html" class="details-button">Details</a>
    </div>

    <div class="listing">
        <img class="listing-image" src="https://picsum.photos/200" alt="something">
        <div class="listing-details">
            <h3>Item 3</h3>
        </div>
        <div class="listing-price">
            <p>Price: €3/p>
        </div>
        <a href="details.html" class="details-button">Details</a>
    </div>

    <div class="listing">
        <img class="listing-image" src="https://picsum.photos/200" alt="something">
        <div class="listing-details">
            <h3>Item 4</h3>
        </div>
        <div class="listing-price">
            <p>Price: €4/p>
        </div>
        <a href="details.html" class="details-button">Details</a>
    </div>

    <div class="listing">
        <img class="listing-image" src="https://picsum.photos/200" alt="something">
        <div class="listing-details">
            <h3>Item 5</h3>
        </div>
        <div class="listing-price">
            <p>Price: €5/p>
        </div>
        <a href="details.html" class="details-button">Details</a>
    </div>

    <div class="listing">
        <img class="listing-image" src="https://picsum.photos/200" alt="something">
        <div class="listing-details">
            <h3>Item 6</h3>
        </div>
        <div class="listing-price">
            <p>Price: €6/p>
        </div>
        <a href="details.html" class="details-button">Details</a>
    </div>
<div>