Menu
As you can see here: JSFiddle
I want author div to be at the bottom of his parent container. I tried with align-self: flex-end; but it's not working. What am I doing wrong?
.flexbox { display: flex; flex-wrap: wrap; justify-content: space-between; } .item { display: flex; flex-direction: column; width: 100px; border: 1px solid #000; padding: 10px; } .item .author { width: 100%; align-self: flex-end; border: 1px solid #000; }<div class="flexbox"> <div class="item"> <div class="title"> Title </div> <div class="content"> Content </div> <div class="author"> Author </div> </div> <div class="item"> <div class="title"> Title </div> <div class="content"> Content<br>Content </div> <div class="author"> Author </div> </div> <div class="item"> <div class="title"> Title </div> <div class="content"> Content<br>Content<br>Content </div> <div class="author"> Author </div> </div> </div>
805
The align-self CSS property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.
Approach #1: Use align-self: flex-end on the button. This would make the button appear in the rightmost corner of your parent. Approach #2: In case you want more control over the position of the button in terms of alignment with the text area, you can wrap the button in a div and keep the float right on the button.
Try add to .author
margin-top: auto; You also need to remove flex-end.
99
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
