html - 将 div 放在没有绝对位置的 flex-box 底部

Question

我有一些 html/css 的问题。

https://jsfiddle.net/n3go4u7y/3/

.row {
display: flex;
display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;      /* TWEENER - IE 10 */
display: -webkit-flex;     /* NEW - Chrome */
display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
margin-bottom: 20px;
}
.product {
background: green;
border: 1px black solid;
padding: 20px;
margin-right: 20px;
}
.product_name {
background: purple;
}
.product_data {
background: yellow;
}
.basket_add {
background: red;
margin-top: 20px;
}

<div class="row">
  <div class="product">
    <div class="product_data">
      <div class="product_name">aaa</div>
      <div class="product_options">
        <div class="product_option">aaa_1</div>
        <div class="product_option">aaa_2</div>
      </div>
    </div>
    <!-- product_data -->
    <div class="basket_add">Add</div>
  </div>
  <!-- product -->
  
  <div class="product">
    <div class="product_data">
      <div class="product_name">bbb</div>
      <div class="product_options">
        <div class="product_option">bbb_1</div>
        <div class="product_option">bbb_2</div>
        <div class="product_option">bbb_3</div>
      </div>
    </div>
    <!-- product_data -->
    <div class="basket_add">Add</div>
  </div>
  <!-- product --> 
</div>
<!-- row -->

我有一个产品列表，我想在一行中始终显示 2 个。所有产品都放在一个 product-div 中，这个 div 使用边框。产品有一些固定的属性，如 name/desc 和一些动态属性。

我想在 product-div 的底部添加一个按钮(添加到购物车)。

为了让所有产品 div 在同一高度排成一行，我使用的是 felx-box。

现在我的问题是，我无法让“添加”按钮在同一行中为每个产品显示相同的高度。

我不能使用绝对位置，因为 product_options 必须拉伸(stretch) product-div。

关于如何让它工作的任何提示？我尝试了几个小时，但无法正常工作...如果真的有必要，我什至可以使用 javascript (jquery)。

非常感谢

Answer 1

嵌套 flex 盒

使“product”元素成为一个 flexbox 列:

.product {
  display: flex;
  flex-direction: column;
}

并给“底部”div margin-top auto

.basket_add {
  margin-top: auto;
}

.row {
  display: flex;
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  margin-bottom: 20px;
}
.product {
  background: green;
  border: 1px black solid;
  padding: 20px;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
}
.product_name {
  background: purple;
}
.product_data {
  background: yellow;
}
.basket_add {
  background: red;
  margin-top: auto;
}

<div class="row">
  <div class="product">
    <div class="product_data">
      <div class="product_name">aaa</div>
      <div class="product_options">
        <div class="product_option">aaa_1</div>
        <div class="product_option">aaa_2</div>
      </div>
    </div>
    <!-- product_data -->
    <div class="basket_add">Add</div>
  </div>
  <!-- product -->

  <div class="product">
    <div class="product_data">
      <div class="product_name">bbb</div>
      <div class="product_options">
        <div class="product_option">bbb_1</div>
        <div class="product_option">bbb_2</div>
        <div class="product_option">bbb_3</div>
      </div>
    </div>
    <!-- product_data -->
    <div class="basket_add">Add</div>
  </div>
  <!-- product -->
</div>
<!-- row -->

<div class="row">
  <div class="product">
    <div class="product_data">
      <div class="product_name">ccc</div>
      <div class="product_options">
        <div class="product_option">ccc_1</div>
        <div class="product_option">ccc_2</div>
        <div class="product_option">ccc_3</div>
      </div>
    </div>
    <!-- product_data -->
    <div class="basket_add">Add</div>
  </div>
  <!-- product -->

  <div class="product">
    <div class="product_data">
      <div class="product_name">ddd</div>
      <div class="product_options">
        <div class="product_option">ddd_1</div>
        <div class="product_option">ddd_2</div>
      </div>
    </div>
    <!-- product_data -->
    <div class="basket_add">Add</div>
  </div>
  <!-- product -->
</div>
<!-- row -->