CODEWITHSUNDEEP
htmlcssflexbox
rene marxis
rene marxis

Reputation: 415

place div at bottom on flex-box without position absolute

I have a problem with some 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 -->

I have a list of products, which i want to show always 2 in one row. All products are placed within a product-div and this div uses a border. The products have some fixed attributes, like name/desc and also some dynamic properties.

On bottom of the product-div i want to add an button (add to basket).

To have all product-divs in one row on the same hight, i'm using felx-box.

Now my problem is, that i can't get the Add button to show on the same height for every product in one row.

I can't use position absolute, because the product_options must strech the product-div.

Any hints on how to get this working? I tried for some hours, but can't get this working... I could even use javascript (jquery) if really necessary.

Many thanks

Upvotes: 0

Views: 268

Answers (1)

Paulie_D
Paulie_D

Reputation: 115283

Nested flexboxes

Make the "product" element a flexbox column:

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

and the give the "bottom" div a margin-top of 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 -->

Upvotes: 2

Related Questions