<div class="content">
    <h1>heading 1</h1>
    <h2>heading 2</h2>
    <p>Some more or less text</p>
    <a href="/" class="button">Click me</a>
</div>

CSS注意事项:

根据需要更改.content的高度 由于flex:1属性，按钮将占据底部的整个空白区域，使整个区域可单击。我建议将按钮包装在div或span中

CSS

.content {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.button {
    display: flex;
    flex: 1;
    align-items: flex-end;
}

https://codepen.io/alokjain_lucky/pen/MWooJGw

试试这个

.content { 显示:flex; flex-direction:列; 身高:250 px; 宽度:200 px; 边界:固体; 自动换行:break-word; } .content h1， .content h2 { margin-bottom: 0 px; ｝ .content p { flex: 1; ｝ < div class = "内容" > <标题>标题1 < / h1 > < h2 >标题2 < / h2 > <p>一些或多或少的文本</p> <a href="/" class="button">点击我</a> < / div >

您可以使用display: flex来将一个元素定位到底部，但我认为在这种情况下您不应该使用flex，因为它将影响您的所有元素。

要使用flex将一个元素定位到底部，请尝试以下操作:

.container {
  display: flex;
}

.button {
  align-self: flex-end;
}

你最好的选择是设置位置:绝对的按钮，并将其设置为底部:0，或者你可以将按钮放在容器之外，并使用负变换:平移(-100%)将其带入容器，如下所示:

.content {
    height: 400px;
    background: #000;
    color: #fff;
}
.button {
    transform: translateY(-100%);
    display: inline-block;
}

检查这个JSFiddle

如果可以修改HTML，可以将所有顶部元素包装在单独的div中，然后使用justify-content: space between。

就像这样:

<div class="content">
  <div>
    <h1>heading 1</h1>
    <h2>heading 2</h2>
    <p>Some more or less text</p>
  </div>
  <a href="/" class="button">Click me</a>
</div>

.content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

我刚找到了解决办法。

对于那些对给出的答案不满意的人，可以使用flexbox尝试这种方法

CSS

    .myFlexContainer {
        display: flex;
        width: 100%;
    }

    .myFlexChild {
        width: 100%;
        display: flex;

        /* 
         * set this property if this is set to column by other css class 
         *  that is used by your target element 
         */
        flex-direction: row;

        /* 
         * necessary for our goal 
         */
        flex-wrap: wrap;
        height: 500px;
    }

    /* the element you want to put at the bottom */
    .myTargetElement {
        /*
         * will not work unless flex-wrap is set to wrap and 
         * flex-direction is set to row
         */
        align-self: flex-end;
    }

HTML

    <div class="myFlexContainer">
        <div class="myFlexChild">
            <p>this is just sample</p>
            <a class="myTargetElement" href="#">set this to bottom</a>
        </div>
    </div>

<div class="content">
    <h1>heading 1</h1>
    <h2>heading 2</h2>
    <p>Some more or less text</p>
    <a href="/" class="button">Click me</a>
</div>

CSS注意事项:

根据需要更改.content的高度 由于flex:1属性，按钮将占据底部的整个空白区域，使整个区域可单击。我建议将按钮包装在div或span中

CSS

.content {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.button {
    display: flex;
    flex: 1;
    align-items: flex-end;
}

https://codepen.io/alokjain_lucky/pen/MWooJGw