Align div at bottom of flex-CodePudding

I have this card:

.do_card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  width: 220px;
  height: 320px;
}

.do_container {
  padding: 2px 16px;
}

<div >
  <img src="https://picsum.photos/200/300" style="width:220px;height:150px;margin-left:auto;margin-right:auto;display:block;">
  <div >
    <p style="text-align: center;">Lorem Ipsum</p>
    <div style="display: flex; justify-content: space-between;">
      <p><a href="https://www.test.com" style="color:black"><i ></i> GET IT</a>
        <p>Like</p>
    </div>
  </div>
</div>

How can I get the "GET IT" and "Like" to always be at the bottom of the card?

Setting the do_card to position: relative; and the div with "Get it" and "Like" to position: absoulute; bottom:0px; does not work

CodePudding user response：

To make sure the content set to absolute remains within the desired element (card in your case), make sure to set its parent to position: relative; (.do_card in your case)

It does seem to work for me as mentioned in the comment:

<style>
.do_card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 220px;
  height: 320px;
  position: relative;
}

.do_container {
  padding: 2px 16px;
}
</style>


<div >
   <img src="https://picsum.photos/200/300" style="width:220px;height:150px;margin-left:auto;margin-right:auto;display:block;">
  <div >
    <p style="text-align: center;">Lorem Ipsum</p> 
    <div style="display: flex; justify-content: space-between; position: absolute; bottom: 0; width: 100%; box-sizing: border-box; padding: 0 16px; left: 0;">
        <p><a href="https://www.test.com" style="color:black"><i ></i> GET IT</a>
        <p>Like</p>
      </div>
  </div>
</div>

CodePudding user response：

I would prefer a "non-absolute" solution whenever possible. In fact, you're able to achieve the layout with flexbox. Here's how:

First, you need to put your content inside the card into 2 blocks (top and bottom).

Then, you can use flex-direction: column; and justify-content: space-between; on the card.

.do_card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  width: 220px;
  height: 320px;
  /* vertical stretched alignment */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.do_card img {
  max-width: 100%;
}

.do_container {
  padding: 2px 16px;
}

.do_container_bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<div >
  <!-- top -->
  <div >
    <img src="https://picsum.photos/200/300" style="width:220px;height:150px;margin-left:auto;margin-right:auto;display:block;">
    <p style="text-align: center;">Lorem Ipsum</p>
  </div>

  <!-- bottom -->
  <div >
    <a href="https://www.test.com" style="color:black"><i ></i> GET IT</a>
    <p>Like</p>
  </div>
</div>