当前位置: 首页 > 面试题库 >

使用flexbox将元素对齐到底部

南门意蕴
2023-03-14
问题内容

我有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>

我想要以下布局:

 -------------------
|heading 1          |
|heading 2          | 
|paragraph text     |
|can have many      |
|rows               |
|                   |
|                   |
|                   | 
|link-button        |
 -------------------

无论文本中有多少文本,p我都希望.button始终将其始终停留在底部,而不会将其从流程中移出。我听说这可以通过Flexbox实现,但我无法使其正常工作。


问题答案:

您可以使用自动边距

在通过justify-content和对齐之前align-self,任何正的自由空间都会分配给该维度中的自动边距。

因此,您可以使用以下一种(或两种):

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



.content {

  height: 200px;

  border: 1px solid;

  display: flex;

  flex-direction: column;

}

h1, h2 {

  margin: 0;

}

a {

  margin-top: auto;

}


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

或者,您可以在a增长之前使元素填充可用空间:

p { flex-grow: 1; } /* Grow to fill available space */



.content {

  height: 200px;

  border: 1px solid;

  display: flex;

  flex-direction: column;

}

h1, h2 {

  margin: 0;

}

p {

  flex-grow: 1;

}


<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可以实现这一点,但我不能让它工作。

  • 问题内容: 我正在使用flexbox对齐我的子元素。我想做的是将一个元素居中,而另一个保持最左对齐。通常我会使用来设置left元素。问题是将中心元素推离中心。这是可能的 ,而不 使用绝对定位? HTML和CSS 问题答案: 编辑: 请参阅下面的[Solo答案,这是更好的解决方案。 flexbox背后的想法是提供一个框架,可以轻松地将容器中尺寸可变的元素对齐。这样,提供一个布局而完全忽略一个元素的宽

  • 问题内容: 我有应该根据内容动态更改高度的容器。对于给定行中的所有容器,无论每个容器的内容如何,​​底部文本都应固定在底部。 我认为与一起使用可以将其推到最低点,但似乎没有任何作用。 问题答案: 您需要使父级成为flex容器: 然后,告诉元素填充可用高度:

  • 问题内容: 我想有A B和C中间对齐。 我如何才能D完全右移? 问题答案: 以下是实现此布局的五个选项: CSS定位 带有不可见DOM元素的Flexbox 带有不可见伪元素的Flexbox Flexbox与 flex: 1 CSS网格布局 方法1:CSS定位属性 应用于容器。 应用于项目D。 现在,此项目已完全放置在flex容器中。 更具体地说,项目D从文档流中删除,但停留在最接近的祖先的范围内。

  • 我试图将容器中的三个div中的一个进行底部对齐,但遇到了一些问题。 正如您将看到的,如果我尝试在

  • 问题内容: 我尝试将我的文本与其他文章和答案中的div底部对齐,以了解Stack Overflow中的其他问题,并学会了使用不同的CSS属性来处理此问题。但是我做不到。基本上我的HTML代码是这样的: 效果是,在FF中,我仅获得垂直线(div处于折叠状态),并将文本写在其旁边。如何防止折叠但宽度适合文本? 问题答案: 弹性解决方案 如果您想使用该解决方案,那将是非常好的。但是,除了破解之外,我们还