Reputation: 173
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/.
Upvotes: 0
Views: 513
Reputation: 115383
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>
Upvotes: 2
Reputation: 9739
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;
}
Upvotes: 2