是否可以在轴和拉伸内容上对齐？答案

【问题标题】：Is it possible to align on both axis AND stretch content?是否可以在轴和拉伸内容上对齐？
【发布时间】：2020-10-26 13:44:49
【问题描述】：

我正在使用 flex 在 div（容器）中水平显示元素。这些元素都应该 1. 右下对齐并且 2. 拉伸整个高度。我可以实现 1. 单独和 2. 单独但不能一起实现，它们似乎冲突并且拉伸似乎覆盖了底部对齐。

有没有一种方法可以让我的内部元素实现右下对齐并让它们伸展到整个高度？注意我真的不能添加另一个 div 来包装元素。

  .container {
    display: flex;
    flex-direction: row;
    /* Align inner elements right and bottom */
    align-items: flex-end;
    justify-content: flex-end;
    border: solid 1px red;
  }

  .container > * {
    border: solid 1px blue;
    /* Make inner elements stretch full height*/
    align-self: stretch;
  }

  <div class="container" style="height: 500px;">
    <a href="/#"><p><span>This should be bottom right aligned</span></p></a>
    <p><span>This should be bottom right aligned</span></p>
    <p><span>This should be bottom right aligned</span></p>
    <div>
      <a href="/#"><span>Dropdown Btn</span></a>
    </div>
  </div>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

我认为您的代码目前是 100% 高度并且右下角对齐。但是，如果您指的是 您的内部容器的内容，那么它更有意义。

这里我让内部容器变得灵活，但由于内部内容总是全宽，右对齐没有太大作用，所以我应用了文本对齐。

这是您要寻找的结果吗？

  .container {
    display: flex;
    flex-direction: row;
    /* Align inner elements right and bottom */
    align-items: flex-end;
    justify-content: flex-end;
    border: solid 1px red;
  }

  .container > * {
    border: solid 1px blue;
    /* Make inner elements stretch full height*/
    align-self: stretch;

   /* Because your p-tags has a margin. */
   /* (And it's unclear if you consider that full-height) */
    margin:0;      
   
    /* Align the content of your inner elements */
    display: flex; 
    align-items: flex-end;
    text-align: right;
  }

  <div class="container" style="height: 500px;">
    <a href="/#"><p><span>This should be bottom right aligned</span></p></a>
    <p><span>This should be bottom right aligned</span></p>
    <p><span>This should be bottom right aligned</span></p>
    <div>
      <a href="/#"><span>Dropdown Btn</span></a>
    </div>
  </div>

【讨论】：