小开

您可以使用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

小开

最佳答案

您可以使用汽车的利润

通过justify-content和align-self对齐之前，任何正的自由空间都被分配到汽车边距中维度。< / p >

所以你可以使用其中一个(或两个):

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>

小开

align-self: flex-end;的解决方案不适合我，但如果你想使用flex，这个解决方案可以:

结果

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

代码

注意:当“运行代码片段”时，你必须向下滚动才能看到底部的链接。

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

小开

不确定是否适用于flexbox，但你可以使用position属性。

set parent div position: relative 子元素可能是<p>或<h1>等。设置position: absolute和bottom: 0.

例子:

index . html

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

style.css

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

< a href = " https://codepen。io/sannjayshr555/pen/OdNLBX" rel="noreferrer">这里的代码笔

小开

试试这个

.content {
display: flex;
flex-direction: column;
height: 250px;
width: 200px;
border: solid;
word-wrap: break-word;
}


.content h1 , .content h2 {
margin-bottom: 0px;
}


.content p {
flex: 1;
}

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

小开

我刚找到了解决办法。

对于那些对给出的答案不满意的人，可以使用flexbox尝试这种方法

CSS

    .myFlexContainer {
display: flex;
width: 100%;
}


.myFlexChild {
width: 100%;
display: flex;


/*
* set this property if this is set to column by other css class
*  that is used by your target element
*/
flex-direction: row;


/*
* necessary for our goal
*/
flex-wrap: wrap;
height: 500px;
}


/* the element you want to put at the bottom */
.myTargetElement {
/*
* will not work unless flex-wrap is set to wrap and
* flex-direction is set to row
*/
align-self: flex-end;
}

超文本标记语言

    <div class="myFlexContainer">
<div class="myFlexChild">
<p>this is just sample</p>
<a class="myTargetElement" href="#">set this to bottom</a>
</div>
</div>

小开

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

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

3.完成了!哇。这很简单。

例子:

section {
/* ONLY FOR DEMO, NOT NECESSARY */
display: flex;
flex-wrap: wrap;
}


div {
/* PARENT ELEMENT */
display: flex;
flex-direction: column;
flex: 1;
}


button {
/* TARGET ELEMENT */
margin-top: auto;
}


/* DECORATIVE STYLES FOR DEMO */


button {
font-size: 20px;
background-color: crimson;
color: white;
border-style: none;
border-radius: 3px;
}


section {
margin: 0;
padding: 0;
border: 1px solid black;
background-color: crimson;
}


div {
font-size: 20px;
background-color: khaki;
border: 2px dashed black;
margin: 10px;
padding: 10px;
min-width: 400px;
min-height: 300px;
}

<section>
<div>
<span>Lorem ipsum dolor s at mi imperdiet fringilla vitae id lorem. Donec ut semper sapien, et ullamcorper metu</span>
<button>I</button>
</div>
<div>
<span>Lorem ipsum dolor sit amet</span
><button>
stay
</button>
</div>
<div>
<span
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at augue ac turpis fringilla egestas. quis mi diam. Quisque faucibus, massa non finibus iaculis, arcu nulla auctor enim, quis accumsan dolor odio quis turpis. Duis convallis pulvinar justo sit amet feugiat.
Duis sed lectus at mi imperdiet fringilla vitae id lorem. Donec ut semper sapien, et ullamcorper metu</span
>
<button>
at
</button>
</div>
<div>
<span>Lorem ipsum dolor sit amet</span
><button>
bottom
</button>
</div>
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at augue ac turpis fringilla egestas. Donec quis mctus at mi imperdiet fringilla vitae id lorem. Donec ut semper sapien, et ullamcorper metu</span>
<button>
always
</button>
</div>
<div>
<span>Lorem ipsum dolor sit amet sit amet, consectetur adipiscing elit. Morbi at augue ac turpis fringilla egestas. Donec quis mctus at mi imperdiet fringilla vitae id lorem. Donec ut semper sapien, et ullamcorper</span
><button>
all ways
</button>
</div>
</section>

小开

在将显示设置为flex时，只需使用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>

小开

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

小开

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

CSS注意事项:

根据需要更改.content的高度
按钮将在底部的整个空白区域，因为flex:1属性，使整个区域可点击。我建议将按钮包装在div或span中

CSS

.content {
display: flex;
flex-direction: column;
height: 100vh;
}


.button {
display: flex;
flex: 1;
align-items: flex-end;
}

< a href = " https://codepen。io/alokjain_lucky/pen/MWooJGw" rel="nofollow noreferrer">https://codepen.io/alokjain_lucky/pen/MWooJGw

将一个元素与flexbox对齐到底部

结果

代码