CODEWITHSUNDEEP
htmlcssflexbox
Mario Parra
Mario Parra

Reputation: 1554

Anchoring element to bottom in flexbox layout

I'm trying to centre and anchor my .button-cont element to the bottom of its container by 30px, .card-info.

I've tried setting .card-info to flex-direction: column and align-items/align-content: flex-end, the margin-top: 0 method, and absolute positioning, but none worked.

I'm new-ish to flexbox and have built a nested layout, so it's proving difficult.

NOTE: I've given .card a fixed height to simulate my app's behaviour, which occurs dynamically via jQuery. I think this is part of the challenge.

.events-row {
  display: flex;
  justify-content: space-between;
}
.events-row .card {
  display: flex;
  flex-direction: column;
  flex-basis: 31.3%;
  position: relative;
  height: 1200px;
}
.events-row .card .card-img {
  position: relative;
}
.events-row .card .card-info {
  flex-grow: 1;
  position: relative;
  padding: 15px;
  background-color: grey;
  text-align: left;
  font-size: 1rem;
  color: white;
}
.events-row .card .card-info .button-cont .button {
  display: inline-block;
  margin: 30px;
  border: 1px solid white;
  padding: 10px 30px;
  font-size: 1em;
}
<div class="events-row">
  <div class="card">
    <div class="card-img four-three-img">
      <a href="#">
        <img src="http://placeholdit.imgix.net/~text?txtsize=44&txt=Event%20Photo&w=600&h=400" />
      </a>
    </div>
    <div class="card-info">
      <h2>Event title</h2>
      <h3>Event date</h3>
      <h3>Event venue</h3>
      <p>
        Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
      </p>
      <div class="button-cont">
        <div class="button purple-button">Buy Tickets</div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-img four-three-img">
      <a href="#">
        <img src="http://placeholdit.imgix.net/~text?txtsize=44&txt=Event%20Photo&w=600&h=400" />
      </a>
    </div>
    <div class="card-info">
      <h2>Event title</h2>
      <h3>Event date</h3>
      <h3>Event venue</h3>
      <p>
        Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
      </p>
      <div class="button-cont">
        <div class="button purple-button">Buy Tickets</div>
      </div>
    </div>
  </div>
</div>

Demo: http://codepen.io/ourcore/pen/NdavvY

Upvotes: 1

Views: 1008

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371889

I've tried setting .card-info to flex-direction: column...

Maybe you did, but didn't take all necessary steps.

Currently you have flex-direction: column on the parent of .card-info, which is the parent of .button-cont. Therefore, .button-cont isn't even a flex item.

Make .card-info a flex container, then you can apply flex properties to .button-cont.

Add this to your code:

.card-info {
    display: flex;
    flex-direction: column;
}
.button-cont {
    margin-top: auto;
    align-self: center;
}

revised codepen

Upvotes: 2

Related Questions