有没有更好的方法在水平轴上底部对齐 flex-box div？

Question

currnet result

我正在尝试使用 flexbox 底部对齐图像，但我当前的代码没有按预期工作。我以为我可以在图像 div 上使用“align-self”来实现这种对齐，但结果还是一样。底部对齐图像的最佳方法是什么？（期望的结果在底部）

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

查看我的代码笔：https://codepen.io/mrcrumer/pen/RwgRKor

Desired Result Layout

Answer 1

使用保证金

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

Codepen Link

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

有没有更好的方法在水平轴上底部对齐 flex-box div？

Is there a better approach to bottom align flex-box divs on a horizontal axis?

html

css

flexbox

responsive-design

alignment