使用flexbox将元素与底部对齐

Question

我有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实现,但我无法让它工作.

Answer 1

您可以使用自动边距

在通过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>

Answer 2

您可以使用display:flex将元素定位到底部,但我认为您不想在这种情况下使用flex,因为它会影响您的所有元素.

要使用flex将元素定位到底部,请尝试以下操作:

.container {
  display: flex;
}

.button {
  align-self: flex-end;
}

您最好的选择是将位置:绝对设置为按钮并将其设置为bottom: 0,或者您可以将按钮放在容器外部并使用负数transform: translateY(-100%)将其放入容器中,如下所示:

.content {
    height: 400px;
    background: #000;
    color: #fff;
}
.button {
    transform: translateY(-100%);
    display: inline-block;
}

检查这个JSFiddle

Answer 3

解决方案align-self: flex-end;对我来说不起作用,但是如果你想使用flex,这个做了:

CSS

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

HTML

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

Answer 4

1.样式父元素： style="display:flex; flex-direction:column; flex:1;"

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

3. 完成！哇。那很简单。

例子：

<section style="display:flex; flex-wrap:wrap;"> // For demo, not necessary
    <div style="display:flex; flex-direction:column; flex:1;"> // Parent element
        <button style="margin-top: auto;"> I </button> // Target element
    </div>

    ... 5 more identical divs, for demo ...

</section>

演示：https : //codepen.io/ferittuncer/pen/YzygpWX

Answer 5

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

Answer 6

将 display 设置为flex 时，您可以简单地使用该flex属性来标记哪些内容可以增长，哪些内容不能。

弹性属性

div.content {
 height: 300px;
 display: flex;
 flex-direction: column;
}

div.up {
  flex: 1;
}

div.down {
  flex: none;
}

<div class="content">
  <div class="up">
    <h1>heading 1</h1>
    <h2>heading 2</h2>
    <p>Some more or less text</p>
  </div>

  <div class="down">
    <a href="/" class="button">Click me</a>
  </div>
</div>

Answer 7

不确定 flexbox，但您可以使用 position 属性。

设置父div position: relative 元素和子元素，它们可能是一个<p>或<h1>等等。设置position: absolute和bottom: 0。

例子：

索引.html

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

样式文件

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

代码笔在这里。