将 flex 项目固定到容器底部
[英] Pin a flex item to the bottom of the container
本文介绍了将 flex 项目固定到容器底部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有 4 个带有标题、描述和按钮的块.
无论描述或标题有多长，我都希望标题和说明在顶部对齐，按钮在底部对齐.
我还需要保持相同的 HTML 结构.
我实际需要的示例图片:
有人能看出来吗?到目前为止，我没有在互联网上找到修复程序.
/* FLEXBOX 相关 */.网格 {显示:弹性；对齐内容:间隔；flex-flow:行包装；}.堵塞 {弹性:0 24%；显示:弹性；}.容器 {显示:弹性；flex-flow:行包装；对齐项目:flex-start；}.标题 {弹性:0 100%；}.desc {弹性:0 100%；}.按钮 {弹性:0 100%；align-self: flex-end;}/* 没有与 FLEXBOX 相关的 */.堵塞 {背景颜色:#ccc；}.标题 {字体大小:2rem；字体粗细:粗体；填充:0.5rem；文本对齐:居中；}.desc {背景颜色:灰色；填充:0.5rem；}.按钮 {填充:0.5rem；颜色:蓝色；文本对齐:居中；字体粗细:粗体；}
<div class="block"><div class="容器"><div class="title">标题 1</div><div class="desc">说明 说明 说明 说明 说明 说明 说明 说明 说明 说明
<div class="button">Button</div>
<div class="block"><div class="容器"><div class="title">标题 2</div><div class="desc">说明 说明 说明 说明 说明 说明 说明 说明 说明 说明 说明 说明 说明 说明 说明 说明<div class="button">Button</div>
<div class="block"><div class="容器"><div class="title">标题 3</div><div class="desc">说明 说明 说明 说明 说明 说明 说明 说明 说明 说明 说明 说明 说明
<div class="button">Button</div>
<div class="block"><div class="容器"><div class="title">标题 4</div><div class="desc">说明 说明 说明 说明 说明 说明 说明 说明 说明 说明
<div class="button">Button</div>
codepen 代码在这里
解决方案
由于您使用的是行方向弹性容器，因此无法将最后一项固定在底部.您正在处理横轴空间分布，这意味着伸缩线要么被拉伸，要么被压缩，并且无法将两个项目固定在顶部，一个固定在底部(除非您超出了 flexbox 和使用绝对定位).
这里有一个完整的解释.
使您的布局工作的一种简单而有效的方法是在最后一项上具有 flex 自动边距的列方向容器.通过在主轴上对齐您的项目，您可以隔开单个项目.
这里是对 flex 自动边距的解释:
/* FLEXBOX 相关 */.网格 {显示:弹性；对齐内容:间隔；flex-flow:行包装；}.堵塞 {弹性:0 24%；显示:弹性；}.容器 {显示:弹性；弹性方向:列；/* 新的 *//* flex-flow: 行换行；*//* 对齐项目: flex-start;*/}.标题 {/* 弹性: 0 100%;*/}.desc {/* 弹性: 0 100%;*/}.按钮 {边距顶部:自动；/* 新的 *//* 弹性: 0 100%;*//* align-self: flex-end;*/}/* 没有与 FLEXBOX 相关的 */.堵塞 {背景颜色:#ccc；}.标题 {字体大小:2rem；字体粗细:粗体；填充:0.5rem；文本对齐:居中；}.desc {背景颜色:灰色；填充:0.5rem；}.按钮 {填充:0.5rem；颜色:蓝色；文本对齐:居中；字体粗细:粗体；}
<div class="block"><div class="容器"><div class="title">标题 1</div><div class="desc">说明 说明 说明 说明 说明 说明 说明 说明 说明 说明
<div class="button">Button</div>
<div class="block"><div class="容器"><div class="title">标题 2</div><div class="desc">说明 说明 说明 说明 说明 说明 说明 说明 说明 说明 说明 说明 说明 说明 说明 说明<div class="button">Button</div>
<div class="block"><div class="容器"><div class="title">标题 3</div><div class="desc">说明 说明 说明 说明 说明 说明 说明 说明 说明 说明 说明 说明 说明
<div class="button">Button</div>
<div class="block"><div class="容器"><div class="title">标题 4</div><div class="desc">说明 说明 说明 说明 说明 说明 说明 说明 说明 说明
<div class="button">Button</div>
修改后的代码笔
I have 4 blocks with a title, description and a button.
I want to keep Title and Description aligned on top, and the Button to be aligned on bottom no matter how long the description or title is.
I also need to keep the same HTML structure.
Sample picture of what I actually need:
Can somebody figure it out? I didn't find a fix on internet so far.
/* FLEXBOX RELATED */
.grid {
display: flex;
justify-content: space-between;
flex-flow: row wrap;
}
.block {
flex: 0 24%;
display: flex;
}
.container {
display: flex;
flex-flow: row wrap;
align-items: flex-start;
}
.title {
flex: 0 100%;
}
.desc {
flex: 0 100%;
}
.button {
flex: 0 100%;
align-self: flex-end;
}
/* NO FLEXBOX RELATED */
.block {
background-color: #ccc;
}
.title {
font-size: 2rem;
font-weight: bold;
padding: 0.5rem;
text-align: center;
}
.desc {
background-color: grey;
padding: 0.5rem;
}
.button {
padding: 0.5rem;
color: blue;
text-align: center;
font-weight: bold;
}
<div class="grid">
<div class="block">
<div class="container">
<div class="title">Title 1</div>
<div class="desc">Description Description Description Description Description Description Description Description Description Description</div>
<div class="button">Button</div>
</div>
</div>
<div class="block">
<div class="container">
<div class="title">Title 2</div>
<div class="desc">Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description</div>
<div class="button">Button</div>
</div>
</div>
<div class="block">
<div class="container">
<div class="title">Title 3</div>
<div class="desc">Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description</div>
<div class="button">Button</div>
</div>
</div>
<div class="block">
<div class="container">
<div class="title">Title 4</div>
<div class="desc">Description Description Description Description Description Description Description Description Description Description</div>
<div class="button">Button</div>
</div>
</div>
</div>
The codepen code is here
解决方案
Since you're working with a row-direction flex container, pinning the last item to the bottom is not possible. You're dealing with cross axis space distribution, which means flex lines are either stretched or packed, and there's no way to pin two items to the top and one to the bottom (unless you go beyond flexbox and use absolute positioning).
Here's a complete explanation.
A simple and effective method to make your layout work would be a column-direction container with a flex auto margin on the last item. By aligning your items on the main axis you can space away individual items.
Here's an explanation of flex auto margins:
/* FLEXBOX RELATED */
.grid {
display: flex;
justify-content: space-between;
flex-flow: row wrap;
}
.block {
flex: 0 24%;
display: flex;
}
.container {
display: flex;
flex-direction: column; /* new */
/* flex-flow: row wrap; */
/* align-items: flex-start; */
}
.title {
/* flex: 0 100%; */
}
.desc {
/* flex: 0 100%; */
}
.button {
margin-top: auto; /* new */
/* flex: 0 100%; */
/* align-self: flex-end; */
}
/* NO FLEXBOX RELATED */
.block {
background-color: #ccc;
}
.title {
font-size: 2rem;
font-weight: bold;
padding: 0.5rem;
text-align: center;
}
.desc {
background-color: grey;
padding: 0.5rem;
}
.button {
padding: 0.5rem;
color: blue;
text-align: center;
font-weight: bold;
}
<div class="grid">
<div class="block">
<div class="container">
<div class="title">Title 1</div>
<div class="desc">Description Description Description Description Description Description Description Description Description Description</div>
<div class="button">Button</div>
</div>
</div>
<div class="block">
<div class="container">
<div class="title">Title 2</div>
<div class="desc">Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description</div>
<div class="button">Button</div>
</div>
</div>
<div class="block">
<div class="container">
<div class="title">Title 3</div>
<div class="desc">Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description</div>
<div class="button">Button</div>
</div>
</div>
<div class="block">
<div class="container">
<div class="title">Title 4</div>
<div class="desc">Description Description Description Description Description Description Description Description Description Description</div>
<div class="button">Button</div>
</div>
</div>
</div>
revised codepen
这篇关于将 flex 项目固定到容器底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
