是否有更好的方法来在水平轴上底部对齐flex-box div ?

Question

当前结果

我正在尝试使用flexx底部对齐图像，但我当前的代码没有按预期工作。我想我可以使用align-self"在图像div上实现这种对齐，但结果还是一样的。底部对齐图像的最佳方法是什么?(期望的结果在底部)

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;
}

查看我的codepen: https://codepen.io/mrcrumer/pen/RwgRKor

期望结果布局

Answer 1

留白

.storage-steps-img {
margin-top: auto;
}

Codepen联系

/*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;
}

/*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;
border: 1px solid red;
}
.storage-steps-img {
margin-top: auto;
}

<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>