用flexbox将元素与底部alignment

我和一些孩子有一个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 | ------------------- 

不pipe多less文本在p我想要坚持.button始终在底部，而不是从stream出。 我听说用Flexbox可以实现这个function，但是我无法使用它。

Answer 1

您可以使用自动边距

在通过justify-content和align-self进行alignment之前，任何可用的空闲空间都将分配给该维度中的自动边距。

所以你可以使用其中的一个（或两者）：

 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> 

Answer 2

您可以使用display：flex将元素放置在底部，但在这种情况下我不认为您要使用flex，因为它会影响所有元素。 要使用flex定位元素到底部，请尝试以下操作：

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

你最好的select是设置位置：绝对的button，并将其设置为底部：0，或者您可以将button放置在容器外，并使用negative transormY（-100％）将其放入容器中，如下所示：

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

检查这个小提琴

Answer 3

使用align-self: flex-end;的解决schemealign-self: flex-end; 没有为我工作，但这一个如果你想使用flex：

CSS

 .content{ display: flex; justify-content: space-between; flex-direction: column; } 

HTML

 <div class="content"> <div> <h1>heading 1</h1> <h2>heading 2</h2> <p>Some more or less text</p> </div> <div> <a href="/" class="button">Click me</a> </div> </div> 

结果是：

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