首页 > web前端 > css教程 > 如何使 Flexbox 容器内的元素底部对齐?

如何使 Flexbox 容器内的元素底部对齐?

DDD
发布: 2024-12-25 19:35:10
原创
969 人浏览过

How can I bottom-align elements within a Flexbox container?

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; /* Push following elements to the bottom */

}

a {

  margin-top: auto; /* Push it and following elements to the bottom */

}

登录后复制

示例实现

应用建议的 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中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板