<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

不确定是否适用于flexbox，但你可以使用position属性。

设置父div位置为相对 子元素可能是<p>或<h1>等。设置位置:绝对和底部:0。

例子:

index . html

<div class="parent">
  <p>Child</p>
</div>

style.css

.parent {
  background: gray;
  width: 10%;
  height: 100px;    
  position: relative;
}
p {
  position: absolute;
  bottom: 0;
}

这里是密码笔。

试试这个

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

align-self的解决方案:弯曲端;对我来说没用，但如果你想使用flex，这个是有用的:

结果

 -------------------
|heading 1          |
|heading 2          | 
|paragraph text     |
|                   |
|                   |
|                   | 
|link button        |
 -------------------

Code

注意:当“运行代码片段”时，你必须向下滚动才能看到底部的链接。

.content { display: flex; justify-content: space-between; flex-direction: column; height: 300px; } .content .upper { justify-content: normal; } /* Just to show container boundaries */ .content .upper, .content .bottom, .content .upper > * { border: 1px solid #ccc; } <div class="content"> <div class="upper"> <h1>heading 1</h1> <h2>heading 2</h2> <p>paragraph text</p> </div> <div class="bottom"> <a href="/" class="button">link button</a> </div> </div>

如果可以修改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;
}

1. 样式父元素:Style ="display:flex; "flex-direction:列;flex: 1;

2. 为你想留在底部的元素设置样式:Style ="margin-top: auto;"

3.完成了!哇。这很简单。

例子:

section { /* ONLY FOR DEMO, NOT NECESSARY */ display: flex; flex-wrap: wrap; } div { /* PARENT ELEMENT */ display: flex; flex-direction: column; flex: 1; } button { /* TARGET ELEMENT */ margin-top: auto; } /* DECORATIVE STYLES FOR DEMO */ button { font-size: 20px; background-color: crimson; color: white; border-style: none; border-radius: 3px; } section { margin: 0; padding: 0; border: 1px solid black; background-color: crimson; } div { font-size: 20px; background-color: khaki; border: 2px dashed black; margin: 10px; padding: 10px; min-width: 400px; min-height: 300px; } <section> <div> <span>Lorem ipsum dolor s at mi imperdiet fringilla vitae id lorem. Donec ut semper sapien, et ullamcorper metu</span> <button>I</button> </div> <div> <span>Lorem ipsum dolor sit amet</span ><button> stay </button> </div> <div> <span >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at augue ac turpis fringilla egestas. quis mi diam. Quisque faucibus, massa non finibus iaculis, arcu nulla auctor enim, quis accumsan dolor odio quis turpis. Duis convallis pulvinar justo sit amet feugiat. Duis sed lectus at mi imperdiet fringilla vitae id lorem. Donec ut semper sapien, et ullamcorper metu</span > <button> at </button> </div> <div> <span>Lorem ipsum dolor sit amet</span ><button> bottom </button> </div> <div> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at augue ac turpis fringilla egestas. Donec quis mctus at mi imperdiet fringilla vitae id lorem. Donec ut semper sapien, et ullamcorper metu</span> <button> always </button> </div> <div> <span>Lorem ipsum dolor sit amet sit amet, consectetur adipiscing elit. Morbi at augue ac turpis fringilla egestas. Donec quis mctus at mi imperdiet fringilla vitae id lorem. Donec ut semper sapien, et ullamcorper</span ><button> all ways </button> </div> </section>