Links must be on the same line using flexbox
In the code below, I want all three windows to have the same height, and the links in the three cells must be on the same row as in the screenshot below. I used flexbox for this. Please, help.
.wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
padding-top: 35px;
padding-bottom: 35px;
background-color: pink;
}
.wrapper div:not(:last-child) {
border-right: 1px solid #fdfdfd;
}
.wrapper div {
flex-basis: 33%;
text-align: center;
padding: 10px 4%;
}
<div class="wrapper">
<div>
<span>Heading1</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, scelerisque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
<a href="">Link1</a>
</div>
<div>
<span>Heading2</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, sceleriit. Vestibulum sodales finibus fausque.sit amet, consectetur adipiscin </p>
<a href="">Link2 </a>
</div>
<div>
<span>Heading3</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing . esent erat ex, sceler erat ex, sciit. Vestileriibulum sodales finibus fausque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
<a href="">Link3</a>
</div>
</div>
+3
source to share
2 answers
Remove align-items: flex-start;
from wrapper, give div
display: flex; flex-direction: column;
and install margin-top: auto
in links
.wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
padding-top: 35px;
padding-bottom: 35px;
background-color: pink;
}
.wrapper div:not(:last-child) {
border-right: 1px solid #fdfdfd;
}
.wrapper div {
flex-basis: 33%;
text-align: center;
padding: 10px 4%;
display: flex; /* added property */
flex-direction: column; /* added property */
}
.wrapper div a { /* added rule */
margin-top: auto;
}
<div class="wrapper">
<div>
<span>Heading1</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, scelerisque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
<a href="">Link1</a>
</div>
<div>
<span>Heading2</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, sceleriit. Vestibulum sodales finibus fausque.sit amet, consectetur adipiscin </p>
<a href="">Link2 </a>
</div>
<div>
<span>Heading3</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing . esent erat ex, sceler erat ex, sciit. Vestileriibulum sodales finibus fausque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
<a href="">Link3</a>
</div>
</div>
+5
source to share
.wrapper {
display: flex;
flex-direction: row;
justify-content: stretch;
padding-top: 35px;
padding-bottom: 35px;
background-color: pink;
}
.wrapper div:not(:last-child) {
border-right: 1px solid #fdfdfd;
}
.wrapper div {
display: flex;
flex-basis: 33%;
flex-direction: column;
justify-content: space-between;
text-align: center;
padding: 10px 4%;
}
.wrapper div a {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: flex-end;
}
<div class="wrapper">
<div>
<span>Heading1</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, scelerisque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
<a href="">Link1</a>
</div>
<div>
<span>Heading2</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, sceleriit. Vestibulum sodales finibus fausque.sit amet, consectetur adipiscin </p>
<a href="">Link2 </a>
</div>
<div>
<span>Heading3</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing . esent erat ex, sceler erat ex, sciit. Vestileriibulum sodales finibus fausque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
<a href="">Link3</a>
</div>
</div>
+4
source to share