I want to display a div in three levels: header, content, and footer. The content can vary in height and the footer should always be at the bottom. Here is how I have implemented it:
<div class="news-content-block">
<div class="news-title">
<a href="/link">
{{ $news->title }}
</a>
</div>
<div class="news-content-wrapper">
<div class="news-content"> TEXT OF different length
</div>
</div>
<div class="user-reactions-block-wrapper">
FOOTER CONTENT
</div>
</div>
Here are the styles I have defined:
.news-content-block{
display: flex;
flex: 1;
flex-direction: column;
justify-content: start;
padding: 20px;
}
.news-title {
position: relative;
width: 814px;
height: 24px;
}
.news-content-wrapper {
}
.user-reactions-block-wrapper {
display: flex;
justify-self: flex-end;
align-self:flex-start;
}
In the user-reactions-block-wrapper class, I have set
display: flex;
justify-self: flex-end;
I expected this class to be at the bottom, but that was not the case...
After researching online, I came across this page: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self
which mentions:
justify-self: flex-start; /* Equivalent to 'start'. Note that justify-self is ignored in Flexbox layouts. */
justify-self: flex-end; /* Equivalent to 'end'. Note that justify-self is ignored in Flexbox layouts. */
How can this issue be resolved?