I am attempting to bottom align the images using flexbox, but my current code is not working as expected. I thought I can use "align-self" on the image divs to achieve this alignment, but the result is still the same. What is the best approach to bottom align the images? (desired result at the bottom)
HTML:
<picture>
<source srcset="https://storage.googleapis.com/img.triggermail.io/hammacher/xmas-tree-divider-1440.svg" media="(min-width: 1440px)">
<source srcset="https://storage.googleapis.com/img.triggermail.io/hammacher/xmas-tree-divider-1024.svg" media="(min-width: 1024px)">
<source srcset="https://storage.googleapis.com/img.triggermail.io/hammacher/xmas-tree-divider-768.svg" media="(min-width: 768px)">
<source srcset="https://storage.googleapis.com/img.triggermail.io/hammacher/xmas-tree-divider-425.svg">
<!--425px-->
<img class="hs-xmasTree-divider-special" src="https://storage.googleapis.com/img.triggermail.io/hammacher/xmas-tree-divider-1024.svg" alt="tree-page-divider">
</picture>
<!--Storage Guide Section-->
<h2>Storing</h2>
<p>
Putting away one of our trees is as simple as assembly.
</p>
<div class="storage-steps-outer">
<div class="storage-steps-inner">
<div>
<h4>Step 1</h4>
<p>
Fold trips along the axis of the branch two at a time.
</p>
</div>
<div class="storage-steps-img">
<img>
</div>
</div>
<div class="storage-steps-inner">
<div>
<h4>Step 2</h4>
<p>
Disconnect each pole section.
</p>
</div>
<div class="storage-steps-img">
<img>
</div>
</div>
<div class="storage-steps-inner">
<div>
<h4>Step 3</h4>
<p>
Nest each section and branches into one of our storage bags.
</p>
</div>
<div class="storage-steps-img">
<img>
</div>
</div>
</div>
CSS:
/*--- ---MOBILE STYLES--- ---*/
.hs-xmasTree-editorial{
margin: 18px 0 0 0;
padding: 0;
}
.hs-xmasTree-editorial h1{
font-size: 30px;
color: #008073;
}
.hs-xmasTree-editorial h2{
font-size: 28px;
color: #008073;
}
.hs-xmasTree-editorial h3{
font-size: 24px;
color: black;
}
.hs-xmasTree-editorial h4{
font-size: 20px;
color: black;
}
.hs-xmasTree-editorial p{
font-size: 18px;
}
.hs-xmasTree-editorial .hs-xmasTree-small-text{
font-size: 14px;
}
.hs-xmasTree-editorial a:link {
color: #1253ad;
text-decoration: none;
}
.hs-xmasTree-editorial a:visited {
color: #1253ad;
}
.hs-xmasTree-editorial a:hover {
color: #000;
text-decoration: underline;
}
.hs-xmasTree-editorial a:active {
color: #1253ad;
}
/*SECTION DIVIDER*/
.hs-xmasTree-divider{
width: 100%;
margin-top: 15px;
margin-bottom: 16px;
}
.hs-xmasTree-divider-special{
width: 100%;
margin-top: 0px;
margin-bottom: 16px;
}
/*Storage Section*/
.storage-steps-outer {
display: flex;
flex-direction: column;
}
.storage-steps-img {
background-color: gray;
width: 100%;
height: 200px;
margin-bottom: 8px;
}
/*Tablet Styles*/
@media only screen and (min-width: 768px) {
/*Desktop Styles*/
@media only screen and (min-width: 1024px) {
/*Tree Width Section*/
/*Storing Section*/
.storage-steps-outer{
display: flex;
flex-flow: row;
}
.storage-steps-inner{
display: flex;
flex-direction: column;
padding: 8px;
flex: 1;
}
.storage-steps-img {
align-self: flex-end;
}
View my codepen: https://codepen.io/mrcrumer/pen/RwgRKor
