SOURCE

<div class="container">
    <div class="tips">
      利用flex和margin-top:auto;自适应多行文字居下显示问题，
      原理可以了解一下bfc下的margin以及ffc下的margin，
      总结就是：
      bfc中margin-top 和 margin-bottom 的值如果是 auto，则他们的值都为 0。
      ffc中margin-top 和 margin-bottom 的值如果是 auto，则他们平均分配垂直方向上的剩余空间。
    </div>
    <div class="card">
      <div class="product">
        <img class="product__image" src="https://picsum.photos/200/300?grayscale" alt="">
        <div class="product__content">
          <div class="product__time">2023-05-30 15:49:12</div>
          <div class="product__info">
            <div class="product__name">产品旗舰版（一行文字）</div>
            <div class="product__price">
              <div class="price"><span class="unit">¥</span>1600</div>
              <div class="acount">X 2</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="product">
        <img class="product__image" src="https://picsum.photos/200/300?grayscale" alt="">
        <div class="product__content">
          <div class="product__time">2023-05-30 15:49:12</div>
          <div class="product__info">
            <div class="product__name">产品旗舰版产品旗舰版产品旗舰版产品旗舰版（多行文字）</div>
            <div class="product__price">
              <div class="price"><span class="unit">¥</span>1600</div>
              <div class="acount">X 2</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tips">
      常规margin-top的px值布局
    </div>
    <div class="card">
      <div class="product">
        <img class="product__image" src="https://picsum.photos/200/300?grayscale" alt="">
        <div class="product__content">
          <div class="product__time">2023-05-30 15:49:12</div>
          <div class="product__info--error">
            <div class="product__name">产品旗舰版产品旗舰版产品旗舰版产品旗舰版（正常布局会溢出）</div>
            <div class="product__price">
              <div class="price"><span class="unit">¥</span>1600</div>
              <div class="acount">X 2</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

.container {
      width: 375px;
    }

    .card {
      border-radius: 2px;
      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
      padding: 16px;
      margin-top: 16px;
    }

    .product {
      display: flex;
      justify-content: flex-start;
    }

    .product__image {
      width: 120px;
      height: 120px;
    }

    .product__content {
      /* flex 布局规定方向 */
      display: flex;
      flex-direction: column;
      margin-left: 16px;
      flex: 1;
    }

    .product__time {
      font-size: 12px;
    }

    .product__info {
      /* 核心就是这句 margin-top:auto; */
      margin-top: auto;
    }

    .product__name {
      font-size: 16px;
    }

    .product__price {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 12px;
    }

    .product__price>.price,
    .acount {
      color: #E2A680;
      font-size: 16px;
    }

    .product__price>.price>.unit {
      margin-right: 5px;
    }

    .product__info--error {
      margin-top: 47px;
    }

    .tips {
      margin-top: 16px;
    }