使用 flexbox 将元素与底部对齐
Posted
技术标签:
【中文标题】使用 flexbox 将元素与底部对齐【英文标题】：Align an element to bottom with flexbox 【发布时间】：2015-09-09 03:22:01 【问题描述】：我有一个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 实现，但我无法让它发挥作用。
【问题讨论】：
给它postition: absolute; bottom 0; ?
@Jonathan 包装器没有固定高度。如果我把它拿出来，它会与文本重叠
@supersize old Q 但你可以给包装器position:relative - 这很愚蠢，因为我认为它默认是相对的，但你已经设置它以便包含孩子的绝对定位。然后bottom:0 将适合齐平。
@Jacksonkr div 的默认位置是static 而不是relative。
我意识到这是一个旧线程，但乔纳森的建议应该重命名为position，而不是postition。
【参考方案1】：
您可以使用 display: flex 将元素定位到底部，但我认为您不想在这种情况下使用 flex，因为它会影响您的所有元素。
要使用 flex 将元素定位到底部，请尝试以下操作：
.container
display: flex;
.button
align-self: flex-end;
最好的办法是为按钮设置 position: absolute 并将其设置为bottom: 0，或者您可以将按钮放在容器外并使用负数transform: translateY(-100%) 将其带入容器，如下所示：
.content
height: 400px;
background: #000;
color: #fff;
.button
transform: translateY(-100%);
display: inline-block;
查看JSFiddle
【讨论】：
如果你想要它在底部，请确保将 flex-direction 设置为 column。 如果我不能提供高度怎么办？ 对我有用的只是：```。内容显示：弹性；弹性方向：列；证明内容：弹性结束； 某事 ```【参考方案2】：您可以使用auto margins
在通过
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>【讨论】：
对我来说，这适用于 Chrome，但不适用于 ios 10.2 上的 Safari。谁能确认一下？ @Oriol 我喜欢这种方法，但不是失去折叠边距的副作用，你会怎么做？ flex-grow 为我工作。这是我的做法html height: 100%; body min-height: 100%; display: flex; flex-direction: column; #site-content flex: 1;
另外，请记住 height: 100% 在您尝试使用 margin-top: auto; 将某些内容推到底部的父元素上
"任何正的可用空间都分配到该维度的自动边距。"像这样的小东西是如此优雅，对我来说，这个解决方案是根据您的答案编写的 2 行代码。谢谢你:)【参考方案3】：
align-self: flex-end; 的解决方案对我不起作用，但如果您想使用 flex，这个解决方案可以：
结果
-------------------
|heading 1 |
|heading 2 |
|paragraph text |
| |
| |
| |
|link button |
-------------------
代码
注意：“运行代码 sn-p”时，您必须向下滚动才能看到底部的链接。
.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>【讨论】：
content 是它包含 2 个其他容器的列容器，其中 justify-content: space-between;您告诉 flexbox 将容器彼此推开多少（在这种情况下受内容容器的高度限制） 这不是真正的结果，每个项目之间会有空格（因此得名） @Barbz_YHOOL 不，如果您增加容器高度，它会起作用（参见更新示例） 搜索了很多，这简直太完美了！谢谢。 稍作修改，这个答案对我来说非常有效，谢谢【参考方案4】：不确定 flexbox，但您可以使用 position 属性。
设置父级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;
Code pen here.
【讨论】：
position:fixed 不起作用，因为那样它就不会与它所在的容器相关。也许你的意思是position:absolute？
虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。
更新答案。【参考方案5】：
试试这个
.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>【讨论】：
【参考方案6】：我刚刚找到了解决方案。
对给出的答案不满意的人可以尝试使用 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;
HTML
<div class="myFlexContainer">
<div class="myFlexChild">
<p>this is just sample</p>
<a class="myTargetElement" href="#">set this to bottom</a>
</div>
</div>
【讨论】：
【参考方案7】：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>【讨论】：
【参考方案8】：将显示设置为 flex 时，您可以简单地使用flex 属性来标记哪些内容可以增长，哪些内容不能增长。
Flex property
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>【讨论】：
提醒自己：记得在容器中设置高度。我很挣扎，在我的场景中，我所缺少的只是设置高度：100%【参考方案9】：如果您能够修改 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;
【讨论】：
【参考方案10】：<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;
https://codepen.io/alokjain_lucky/pen/MWooJGw
【讨论】：
以上是关于使用 flexbox 将元素与底部对齐的主要内容，如果未能解决你的问题，请参考以下文章