显示弯曲选项有问题

Question

这是我文件中的一段代码，我按照 youtube 教程使用 html 和 css 制作这张卡片，但这些卡片没有像视频中所示那样彼此相邻显示，是因为我的图像太大了吗？

我的CSS代码

<style>
      *{
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
        font-family: sans-serif;
      }

      body{
        background-color: #f0f0f0;
      }

      .card-container{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 100px;
      }
      .card{
        width: 325px;
        background: #f0f0f0;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0px 2px 4px rgb(0,0,0,0.2);
        margin: 20px;
      }

      .card img{
         width: 100%;
         height: auto;
      }

      .card-content{
         padding: 16px;
      }

      .card-content h3 {
        font-size: 28px;
        margin-bottom: 8px;
      }

      .card-content p{
        color: #666;
        font-size: 15px;
        line-height: 1.3;
      }

      .card-content .btn{
          display: inline-block;
          padding: 8px 16px;
          background-color: #333;
          text-decoration: none;
          border-radius: 4px;
          margin-top: 16px;
          color: #fff;
      }

我的html代码

<div class="card-container">
      <div class="card">
        <img src="images/nike.jpg" alt="nikeshoes" class="card-image" />
        <div class="card-content">
          <h3>Nike Shoes</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas
            praesentium similique, libero perspiciatis neque veniam perferendis
            deleniti, esse necessitatibus sed
          </p>
          <a href="" class="btn">Read More!</a>
        </div>
      </div>
    </div>
    

    <div class="card-container">
      <div class="card">
        <img src="images/nike.jpg" alt="nikeshoes" class="card-image" />
        <div class="card-content">
          <h3>Nike Shoes</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas
            praesentium similique, libero perspiciatis neque veniam perferendis
            deleniti, esse necessitatibus sed
          </p>
          <a href="" class="btn">Read More!</a>
        </div>
      </div>
    </div>

我使用了显示弹性属性，我希望我的卡片能够彼此相邻地显示，但它们却呈一条直线，其中一张位于另一张之上

Answer 1

不要使用宽度，使用

flex-basis

。

      *{
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
        font-family: sans-serif;
      }

      body{
        background-color: #f0f0f0;
      }

      .card-container{
        display: flex;
        justify-content: center;
        margin-top: 100px;
      }
      .card{
        flex-basis: 50%;
        width: 325px;
        background: #f0f0f0;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0px 2px 4px rgb(0,0,0,0.2);
      }
      
     .card img{
         width: 100%;
         height: auto;
      }

 
      .card-content{
         padding: 16px;
      }

      .card-content h3 {
        font-size: 28px;
        margin-bottom: 8px;
      }

      .card-content p{
        color: #666;
        font-size: 15px;
        line-height: 1.3;
      }

      .card-content .btn{
          display: inline-block;
          padding: 8px 16px;
          background-color: #333;
          text-decoration: none;
          border-radius: 4px;
          margin-top: 16px;
          color: #fff;
      }

<div class="card-container">
      <div class="card">
        <img src="images/nike.jpg" alt="nikeshoes" class="card-image" />
        <div class="card-content">
          <h3>Nike Shoes</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas
            praesentium similique, libero perspiciatis neque veniam perferendis
            deleniti, esse necessitatibus sed
          </p>
          <a href="" class="btn">Read More!</a>
        </div>
      </div>

   
      <div class="card">
        <img src="images/nike.jpg" alt="nikeshoes" class="card-image" />
        <div class="card-content">
          <h3>Nike Shoes</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas
            praesentium similique, libero perspiciatis neque veniam perferendis
            deleniti, esse necessitatibus sed
          </p>
          <a href="" class="btn">Read More!</a>
        </div>
      </div>