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

Question

我正在尝试对齐 flexbox 底部的 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>

Answer 1

你的 html 布局真的很乱。 google flexbox 并重试。

.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;
  height:100vh;
  position:relative;
 
  
}



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

.parameters {
  position:absolute;
  bottom:0;
}

<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>