如何在底部对齐 flexbox 内的 div？

【问题标题】：How to align div inside flexbox at bottom?如何在底部对齐 flexbox 内的 div？
【发布时间】：2021-10-05 00:15:21
【问题描述】：

我正在尝试对齐弹性框底部的 div。我试过 align-content: flex-end;但什么也不做。

如何 <.div class="parameters"> 保持在行的底部？就像当这个底部上方的行中的内容不同时一样长。

    .product--5-cols {
    max-width: 23%;
    min-width: 250px;
    -webkit-flex-basis: 23%;
    -ms-flex-preferred-size: 23%;
    flex-basis: 23%;
    border-width: 0 1px 1px 0;}
   

    .compare {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: scroll;
    align-items: stretch;}

<div class="product-overview compare" id="product-compare">
          <div class="product--5-cols">
              <h2 id="products-to-compare" class="compare-page-title">Porovnání (5)</h2>
              <div class="parameters">
              <div class="compare-product-parameters-white" id="compare-sock"><span class="in-stock in-stock--up">Skladem</span></div>
              <div class="compare-product-parameters-blue" id="compare-brand">Solight</div>
              <div class="compare-product-parameters-blue"><span class="in-stock in-stock--up">Naskladňujeme</span></div>
              </div>
          </div>
          <div class="product--5-cols">
            <div class="product product--5-cols">
              <div class="product__labels">
              </div>
              <div class=" compare_page_heading">
                <h5><a href="product-detail.html">light maketa bezpečnostní kamery, na stěnu, LED dioda</a></h5>
              </div>
              <div class="product__info"><div class="product-row__actions"><a class="remove" href="#" title="Smazat"><i class="icon icon-close">
                <div class="sr-only">Smazat</div></i></a></div></div><a class="product__img" href="product-detail.html"><img src="assets/images//samples/product-1.jpg"></a>
              <div class="product__price compare_page_price"><strong>19&nbsp;306&nbsp;Kč</strong></div>
              <div class="product__footer">
                <a class="item compare_page_icon" href="#"><i class="icon icon-heart" title="Oblíbené"></i></a>
                <div class="product__buy compare_page_buy">
                  <div class="form-control-wrapper">
                    <div class="counter"><a class="counter__plus" href="#">+</a><a class="counter__minus" href="#">–</a></div>
                    <input class="form-control" type="number" value="1"><span class="units">ks</span>
                  </div>
                  <button class="btn btn-primary btn-xlg" title="koupit"><i class="icon icon-add-to-cart"></i></button>
                </div>
              </div>    
            </div>
            <div class="parameters">
            <div class="compare-product-parameters-white" id="compare-sock"><span class="in-stock in-stock--up">Skladem</span></div>
            <div class="compare-product-parameters-blue" id="compare-brand">light</div>
            <div class="compare-product-parameters-blue"><span class="in-stock in-stock--up">Naskladňujeme</span></div>
            </div>
          </div>

【问题讨论】：

• 您想将

  对齐到什么位置？默认情况下，一个 div 将占用 100% 的可用宽度。你想让 div 的内部在同一行吗？
• 也许为了更好的理解，我添加了截图。蓝色部分是

  一行应该是什么