Css flex-box - How to align a single item to the bottom while keeping the other items to the top

Question

I've been playing with flex-box for a while but now I'm stuck with an issue. I made a few boxes and in each box there are 3 items inside, an image a paragraph and a button. The image and the paragraph need to stay on top while the buttons need to be aligned on the bottom of their row. Thank you for your time :)

HTML:

<div class="parent">
  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam metus felis, porttitor ac est id, vestibulum vestibulum metus. Vestibulum</p>
    <input type="button" value="bring me down!">
  </div>
  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>e egestas, dui nibh gravida urna</p>
    <input type="button" value="bring me down!">
  </div>
  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>Suspendisse eta</p>
    <input type="button" value="bring me down!">
  </div>

  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>orem ipsum dolor sit amet</p>
    <input type="button" value="bring me down!">
  </div>
  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam metus felis, porttitor ac est id, vestibulum vestibulum metus. Vestibulum</p>
    <input type="button" value="bring me down!">
  </div>
  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>e egestas, dui nibh gravida urna</p>
    <input type="button" value="bring me down!">
  </div>

  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>orem ipsum dolor sit amet</p>
    <input type="button" value="bring me down!">
  </div>
  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p> est id, vestibulum vestibulum metu</p>
    <input type="button" value="bring me down!">
  </div>
  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam metus felis, porttitor ac est id, vestibulum vestibulum metus. Vestibulum</p>
    <input type="button" value="bring me down!">
  </div>

</div>

CSS:

.parent {
  width: 500px;
  display: flex;
  flex-wrap: wrap;
}
.parent .child {
  border: 1px solid black;
  flex: 1 1 32%;
}
.parent .child img {
  max-width: 100%;
}
.parent .child input {
  width: 100%;
  align-self: flex-end; /*alignment not working*/
}

http://jsfiddle.net/ou6wLg1m/ .

Answer 1

You can do this:

Use position: absolute to fix the button on the bottom and give the same padding-bottom to the main div to adjust your height button needs.

CSS

.parent {
    width: 500px;
    display: flex;
    flex-wrap: wrap;
}
.parent .child {
    border: 1px solid black;
    flex: 1 1 32%;
    position:relative;
    padding-bottom: 20px;
    box-sizing: border-box;
}
.parent .child img {
    max-width: 100%;
}
.parent .child input {
    width: 100%;
    bottom: 0;
    position: absolute;
}

DEMO HERE

Answer 2

The child is basically a column so you can use flexbox and flex-direction column.

.parent {
  width: 500px;
  display: flex;
  flex-wrap: wrap;
}
.parent .child {
  border: 1px solid black;
  flex: 1 1 32%;
    display: flex;
    flex-direction: column;
    align-items:flex-start;

}

.parent .child input {
  width: 100%;
  margin-top: auto;
  align-self: flex-end; 
}

 .parent { width: 500px; display: flex; flex-wrap: wrap; } .parent .child { border: 1px solid black; flex: 1 1 32%; display: flex; flex-direction: column; align-items: flex-start; } .parent .child img {} .parent .child input { width: 100%; margin-top: auto; align-self: flex-end; } 

 <div class="parent"> <div class="child"> <img src="http://www.placehold.it/50/50"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam metus felis, porttitor ac est id, vestibulum vestibulum metus. Vestibulum</p> <input type="button" value="bring me down!"> </div> <div class="child"> <img src="http://www.placehold.it/50/50"> <p>e egestas, dui nibh gravida urna</p> <input type="button" value="bring me down!"> </div> <div class="child"> <img src="http://www.placehold.it/50/50"> <p>Suspendisse eta</p> <input type="button" value="bring me down!"> </div> <div class="child"> <img src="http://www.placehold.it/50/50"> <p>orem ipsum dolor sit amet</p> <input type="button" value="bring me down!"> </div> <div class="child"> <img src="http://www.placehold.it/50/50"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam metus felis, porttitor ac est id, vestibulum vestibulum metus. Vestibulum</p> <input type="button" value="bring me down!"> </div> <div class="child"> <img src="http://www.placehold.it/50/50"> <p>e egestas, dui nibh gravida urna</p> <input type="button" value="bring me down!"> </div> <div class="child"> <img src="http://www.placehold.it/50/50"> <p>orem ipsum dolor sit amet</p> <input type="button" value="bring me down!"> </div> <div class="child"> <img src="http://www.placehold.it/50/50"> <p>est id, vestibulum vestibulum metu</p> <input type="button" value="bring me down!"> </div> <div class="child"> <img src="http://www.placehold.it/50/50"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam metus felis, porttitor ac est id, vestibulum vestibulum metus. Vestibulum</p> <input type="button" value="bring me down!"> </div> </div>