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

Posted 2023-03-05

【中文标题】有没有更好的方法在水平轴上底部对齐 flex-box div？

【英文标题】：Is there a better approach to bottom align flex-box divs on a horizontal axis?

【发布时间】：2021-11-01 04:12:25

【问题描述】：

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

【问题讨论】：

这能回答你的问题吗？ Align an element to bottom with flexbox

【参考方案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" >
</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>