This is the layout setup I am aiming for using display:flex. My goal is to have text1 displayed at the top, text3 at the bottom, and text2 in the middle.
https://i.sstatic.net/xaeaB.png
However, the actual outcome looks like this:
https://i.sstatic.net/NPKkL.png
I thought that by using align-self, I could position the top and bottom divs accordingly.
What did I overlook?
Here is the link to my HTML markup and CSS stylesheet.
HTML:
<div class=container>
<div class='logo-container hidden-xs'>
<span>LOGO on the side</span>
</div>
<div class='text-container' >
<div class='visible-xs'>
<span>LOGO</span>
</div>
<div class=text1>
Text1
</div>
<div class=text2>
Text 2
</div>
<div class=text3>
Text 3
</div>
</div>
</div>
CSS:
.container {
display: flex;
/* flex-direction: row; no effect */
border: 1px;
border-style: solid;
height: 300px;
}
.container span {
padding: 5px;
border: 1px;
border-style: solid;
border-color: blue;
}
.text-container {
flex-direction: column;
border: 1px;
border-style: solid;
border-color: red;
}
.do-i-need-this {
display: flex;
flex-direction: row;
}
.text1 {
align-self: flex-start;
border: 1px;
border-style: solid;
border-color: green;
}
.text2 {
border: 1px;
border-style: solid;
border-color: green;
}
.text3 {
align-self: flex-end;
border: 1px;
border-style: solid;
border-color: green;
}