![How can I bottom-align elements within a Flexbox container?](https://img.php.cn/upload/article/000/000/000/173512651482334.jpg)
Flexbox:底部对齐元素
如果您有一个包含子元素的容器元素,并且您想要对齐最底部的子元素垂直于容器底部,多功能 Flexbox 布局模型提供了有效的解决方案。
在示例中提供:
1 2 3 4 5 6 | <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>
|
登录后复制
您想要以下布局:
1 2 3 4 5 6 7 8 9 10 11 | -------------------
| heading 1 |
| heading 2 |
| paragraph text |
| can have many |
| rows |
| |
| |
| |
| link-button |
-------------------
|
登录后复制
利用自动边距
自动边距被证明是一个方便的工具这个场景。在通过 justify-content 和align-self 进行对齐过程之前,任何剩余的可用空间都会自动分配到该维度中的自动边距。
因此,您可以采用以下一项或两项CSS 规则:
1 2 3 4 5 6 | p {
margin-bottom: auto;
}
a {
margin-top: auto;
}
|
登录后复制
示例实现
应用建议的 CSS 规则,并结合 Flexbox 容器柱状方向,产生所需的结果:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .content {
height: 200px;
border: 1px solid;
display: flex;
flex-direction: column;
}
h1, h2 {
margin: 0;
}
a {
margin-top: auto;
}
|
登录后复制
1 2 3 4 5 6 | <div class = "content" >
<h1>heading 1</h1>
<h2>heading 2</h2>
<p>Some text more or less</p>
<a href= "/" class = "button" >Click me</a>
</div>
|
登录后复制
以上是如何使 Flexbox 容器内的元素底部对齐?的详细内容。更多信息请关注PHP中文网其他相关文章!