您可以使用自动边距
在通过
justify-content和对齐之前
align-self,任何正的自由空间都会分配给该维度中的自动边距。
因此,您可以使用以下一种(或两种):
p { margin-bottom: auto; } a { margin-top: auto; } .content { height: 200px; border: 1px solid; display: flex; flex-direction: column;}h1, h2 { margin: 0;}a { margin-top: auto;}<div > <h1>heading 1</h1> <h2>heading 2</h2> <p>Some text more or less</p> <a href="/" >Click me</a></div>或者,您可以在
a增长之前使元素填充可用空间:
p { flex-grow: 1; } .content { height: 200px; border: 1px solid; display: flex; flex-direction: column;}h1, h2 { margin: 0;}p { flex-grow: 1;}<div > <h1>heading 1</h1> <h2>heading 2</h2> <p>Some text more or less</p> <a href="/" >Click me</a></div>


