5

See jsfiddle here: https://jsfiddle.net/q3ob7h1o/1/ Or just read it here if you'd rather:

Code

* {
  margin: 0;
  padding: 0;
}
ul {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-align-content: flex-end;
  align-content: flex-end;
}
.tile {
  width: 33%;
  display: inline-block;
  box-sizing: border-box;
  position: relative;
}
.content {
  background: beige;
}
.footer {
  background: teal;
}
<ul>
  <li class="tile">
    <div class="content">
      <div class="photo"></div>
      <h3>This is some long long long long long long long long long long long long long long long long content</h3>
    </div>
    <div class="footer">
      <input type="submit" />
    </div>
  </li>
  <li class="tile">
    <div class="content">
      <div class="photo"></div>
      <h3>This is some content</h3>
    </div>
    <div class="footer">
      <input type="submit" />
    </div>
  </li>
  <li class="tile">
    <div class="content">
      <div class="photo"></div>
      <h3>This is some content</h3>
    </div>
    <div class="footer">
      <input type="submit" />
    </div>
  </li>
</ul>

What I am trying to do

What I am trying to do is have the .footer div align to the bottom of each of the .tile elements, so that regardless of the amount of content in each tile, the footers line up.

I know I can use position: absolute on the footer but I would rather avoid this as the height of the footer might not be known.

I tried turning .tile into a flexbox itself and setting its direction to column, but this didn't work. I also tried turning each tile into a table-cell but this didn't work either.

The bit that is throwing me is that I am trying to target an element within one of the children of an existing flexbox. Any flexbox properties I apply apply to .tile, not .footer

Help greatly appreciated :)

Sebastian Brosch
  • 42,106
  • 15
  • 72
  • 87
Jonathon Blok
  • 749
  • 4
  • 14
  • 2
    Possible duplicate of [Align an element to bottom with flexbox](http://stackoverflow.com/questions/31000885/align-an-element-to-bottom-with-flexbox) – Mosh Feu Jan 12 '16 at 12:01
  • 1
    The difference is that I already have a flexbox in place. I want to align an element within one of the flexbox children. – Jonathon Blok Jan 12 '16 at 12:04
  • Once you've played a bit with flexbox, this single page by CSS Tricks is very useful: [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) (flex container on left, flex items on right) – FelipeAls Jan 12 '16 at 14:12

1 Answers1

4

Try the following solution:

* {
  margin: 0;
  padding: 0;
}
ul {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-align-content: flex-end;
  align-content: flex-end;
}
.tile {
  width: 33%;
  display: flex;
  box-sizing: border-box;
  justify-content: space-between;
  flex-direction:column;
}
.content {
  background: beige;
}
.footer {
  background: teal;

}
<ul>
  <li class="tile">
    <div class="content">
      <div class="photo"></div>
      <h3>This is some long long long long long long long long long long long long long long long long content</h3>
    </div>
    <div class="footer">
      <input type="submit" />
    </div>
  </li>
  <li class="tile">
    <div class="content">
      <div class="photo"></div>
      <h3>This is some content</h3>
    </div>
    <div class="footer">
      <input type="submit" />
    </div>
  </li>
  <li class="tile">
    <div class="content">
      <div class="photo"></div>
      <h3>This is some content</h3>
    </div>
    <div class="footer">
      <input type="submit" />
    </div>
  </li>
</ul>

The updated fiddle you can find here: https://jsfiddle.net/q3ob7h1o/2/

Sebastian Brosch
  • 42,106
  • 15
  • 72
  • 87