In a flex container, not able to align the items towards the flex-axis (when the flex-direction is column).
Please refer the code snippet below.
I would expect the result with the items aligned from the bottom (justify-content: flex-end
supposed to be in effect) .
But the items are displayed as if justify-content: flex-start
is in effect.
Any idea where I am erring?
Taking hint from @Temani Afif's comment I could fix it.
I have to make sure the container height is 100%. Also height of the html and body elements are also 100%.
html, body{
height: 100%;
}
html, body {
height: 100%;
}
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-direction: column;
height: 100%;
}
.flex-start {
justify-content: flex-start;
}
.flex-end {
justify-content: flex-end;
}
.flex-end li {
background: gold;
}
.center {
justify-content: center;
}
.center li {
background: deepskyblue;
}
.space-between {
justify-content: space-between;
}
.space-between li {
background: lightgreen;
}
.space-around {
justify-content: space-around;
}
.space-around li {
background: hotpink;
}
.space-evenly {
justify-content: space-evenly;
}
.space-evenly li {
background: #bada55;
}
.flex-item {
background: tomato;
padding: 5px;
width: 35px;
height: 25px;
margin: 5px;
line-height: 25px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
<ul class="flex-container flex-end">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
</ul>